当前位置：文江博客文章教程详情

TaggingJS 基于 jQuery 标签添加删除管理插件

发布于 2020-04-03 11:45:11 字数 16136 浏览 1219 评论 0

TaggingJS 是一个 jQuery 插件，用于创建一个用户可自定义的标签功能，现在很多文章发布类的网站都有这个功能，WordPress 也有这样的功能，添加和删除标签都非常的方便。

这款插件不到3KB ，支持主流浏览器。有几种方法来定制 TaggingJS 的默认行为，一是使用 custom_options 定制全局的 TaggingJS 行为，二是给标签框加上 data 属性，三是结合前面两种方式。

开始使用

最简单

下载这个 tagging.min.js 存储库中的文件
包括 <script src="path/to/tagging.min.js"></script> 在你的页面底部
包括基本CSS标记样式 <link href="tag-basic-style.css" rel="stylesheet"> 到 <head> 你的网页
到您的页面，类似于 <div data-tags-input-name="tag" id="tagBox">preexisting-tag</div>
到您的主 JavaScript 文件 $("#tagBox").tagging();

这个 data-tags-input-name="tag" 是 name 属性中的每个输入使用的 tagBox.

使用方法操作标记

这里有一些共同模式若要操作标记框内的标记，请执行以下操作：

N.B.: $tag_box 是标记框对象。为了得到它：

var t, $tag_box;

// We call taggingJS init on all "#tag" divs
t = $( "#tag" ).tagging();

// This is the $tag_box object of the first captured div
$tag_box = t[0];

获取所有标记(对象)

// To get all tags inside tag box as an array of String
$tag_box.tagging( "getTags" );
>>> ["preexisting-tag", "another-tag"]

// To get all tags inside tag box as an array of jQuery Object
$tag_box.tagging( "getTagsObj" );
>>> [x.fn.x.init[1], x.fn.x.init[1]]

添加新标签

// To add a tag with "A new tag added via JS" as text
$tag_box.tagging( "add", "A new tag added via JS" );
>>> true

// To add two tag, one with "tag 1" and the other with "tag 2" as text
$tag_box.tagging( "add", ["tag 1", "tag 2"] );
>>> ["tag 1", "tag 2"]

移除标签

// To remove a tag with text "A new tag added via JS" as text
$tag_box.tagging( "remove", "A new tag added via JS" );
>>> $_obj

// To remove two tag, one with "tag 1" and the other with "tag 2" as text
$tag_box.tagging( "remove", ["tag 1", "tag 2"] );
>>> [$_obj]

// Suppose that $tag is the jQuerify object of a tag inside the tag box, you can also do
$tag_box.tagging( "remove", $tag] );
>>> $_obj

删除所有标签

// To remove all tags
$tag_box.tagging( "removeAll" );

// or
$tag_box.tagging( "reset" );

获得特殊钥匙

// To get special Keys without distinctions
$tag_box.tagging( "getSpecialKeys" );
>>> Object {comma: 188, enter: 13, spacebar: 32, del: 46, backspace: 8}

// To get special Keys with distinctions
$tag_box.tagging( "getSpecialKeysD" );
>>> Object {add: Object, remove: Object}

添加或移除特殊键

// To add the "left arrow" as a special key to add a new tag
$tag_box.tagging( "addSpecialKeys", [ "add", { left_arrow: 37 } ] );

// To add the "right arrow" as a special key to remove a tag
$tag_box.tagging( "addSpecialKeys", [ "remove", { right_arrow: 39 } ] );

// To remove the "right arrow" as a special key
$tag_box.tagging( "removeSpecialKeys", ["remove", 39] );

禁用 TaggingJS

// To disable taggingJS
$tag_box.tagging( "destroy" );

清空 `type_zone`

// To disable taggingJS
$tag_box.tagging( "emptyInput" );

获取或设置 `type_zone`

// To set "value" as value of the input
$tag_box.tagging( "valInput", "value" );

// To get the value of the input
$tag_box.tagging( "valInput" );

触发焦点事件 `type_zone`

// To Trigger Focus event the input
$tag_box.tagging( "focusInput" );

检测添加或删除标记的时间

// Execute callback when a tag is added
$tag_box.on( "add:after", function ( el, text, tagging ) {
  console.log( "Added tag: ", text );
});

// Execute callback when a tag is removed
$tag_box.on( "remove:after", function ( el, text, tagging ) {
  console.log( "Removed tag: ", text );
});

自定义

确实有几种方式要自定义 taggingJS 的默认行为：

使用JavaScript custom_options 对象来自定义全局taggingJS行为
使用 data 属性中的属性。tagBox HTML标记
使用前两种方式的组合

data 属性具有比 custom_options 对象优先级高，因为每个 data 属性覆盖全局行为。换句话说，全局设置适用于捕获的所有标记框，除非在这些框中指定了 data 属性，这可能会改变你的行为。

第一条路-全局对象

创建自定义选项 object，就像这样 my_custom_options

var my_custom_options = {
	"no-duplicate": true,
	"no-duplicate-callback": window.alert,
	"no-duplicate-text": "Duplicate tags",
	"type-zone-class": "type-zone",
	"tag-box-class": "tagging",
	"forbidden-chars": [",", ".", "_", "?"]
};

创建标记框或多个标签框如下：
```
<div id="tagBox">preexisting-tag</div>
```

加到您的主 JavaScript 文件：

$("#tagBox").tagging( my_custom_options );

通过这种方式，我们自定义了全局行为为全标签盒被选择者抓住了。

第二种方式-数据属性

创建标记框和一些 data 属性，如下所示

<div
	data-no-duplicate="true"
	data-pre-tags-separator="\n"
	data-no-duplicate-text="Duplicate tags"
	data-type-zone-class="type-zone"
	data-tag-box-class="tagging"
	data-edit-on-delete="true"
id="tagBox">preexisting-tag</div>

加到您的主JavaScript文件：
```
$("#tagBox").tagging();
```

使用数据方法与 no-duplicate-callback 和 forbidden-chars 会引起一些问题。避开它。

第三种方式-混合方式

这样，我们混和数据属性和选项对象，用于自定义每个标记框的 taggingJS 行为。

创建标记框和一些data属性，如下所示：

<div class="tag-box"
	data-no-duplicate="true"
	data-tags-input-name="tag"
id="tagBox1">preexisting-tag</div>

创造另一个标签盒没有data属性：

<div id="tagBox1" class="tag-box">preexisting-tag</div>

创建自定义选项 object，就像这样my_custom_options

var my_custom_options = {
	"no-duplicate": false,
	"tags-input-name": "taggone",
	"edit-on-delete": false,
};

加到您的主JavaScript文件

$(".tag-box").tagging( my_custom_options );

现在你可以看到：

这个#tagBox1有一种行为可以覆盖my_custom_options备选方案：
- 不接受重复标记(分别data属性);
- 对于每个标记，它都有tag作为输入名称(分别data属性);
- 在删除时，标记将被完全删除(my_custom_options);
这个#tagBox2只有由my_custom_options:
- 接受重复标签(my_custom_options);
- 对于每个标记，它都有tag作为输入名称(my_custom_options);
- 在删除时，标记将被完全删除(my_custom_options);

可选参数

下面是定制 taggingJS 的可用选项带着 type，一个小的描述和默认值：

参数	类型	默认值	描述
case-sensitive	`Boolean`	`false`	如果`false`，所有文本都被视为小写。
close-char	`String`	`"×"`	单标签关闭字符。
close-class	`String`	`"tag-i"`	单标签关闭类。
edit-on-delete	`Boolean`	`true`	`true`若要编辑刚刚从标记框中删除的标记，请执行以下操作。
forbidden-chars	`Array`	`["," , ".", "_", "?"]`	禁止字符数组。
forbidden-chars-callback	`Function`	`window.alert`	函数在检测到禁止字符时调用。
forbidden-chars-text	`String`	`"Forbidden character:"`	传递给`forbidden-chars-callback`.
forbidden-words	`Array`	`[]`	一连串的禁止词。
forbidden-words-callback	`Function`	`window.alert`	函数在检测到禁止字时调用。
forbidden-words-text	`String`	`"Forbidden word:"`	传递给`forbidden-words-callback`.
no-backspace	`Boolean`	`false`	默认情况下，Backspace键移除最后一个标记，`true`为了避免这种情况。
no-comma	`Boolean`	`false`	逗号`","`键默认添加一个新标记，`true`为了避免这种情况。
no-del	`Boolean`	`false`	默认情况下，DELKEY删除最后一个标记，`true`为了避免这种情况。
no-duplicate	`Boolean`	`true`	如果`true`，标签框中将没有重复标签的名称。
no-duplicate-callback	`Function`	`window.alert`	函数在检测到重复标记时调用。
no-duplicate-text	`String`	`"Duplicate tag:"`	传递给`no-duplicate-callback`.
no-enter	`Boolean`	`false`	输入键添加一个新标签在默认情况下，`true`为了避免这种情况。
no-spacebar	`Boolean`	`false`	空格键默认添加一个新标记。`true`为了避免这种情况。
pre-tags-separator	`String`	`", "`	这是用来`split`初始文本并添加`preexistint-tag`。默认情况下，必须使用逗号和空格放置新标记(`", "`).
tag-box-class	`String`	`"tagging"`	标签框的类。
tag-box-editable-class	`String`	`"editable"`	可编辑时标记框的类，与标记一起使用-CSS目标的限制选项。
tag-char	`String`	`"#"`	单标签炭
tag-class	`String`	`"tag"`	单标签类。
tag-on-blur	`Boolean`	`true`	如果`true`，从`$type_zone`将添加一个新标记。
tags-input-name	`String`	`"tag"`	要使用的名称`name=""`在单个标签的输入中。默认情况下，所有作为数组传递的标记如下`tag[]`.
tags-limit	`Integer`	`0`	限制可以添加的标记数，零表示无限制。
type-zone-class	`String`	`"type-zone"`	类型区域的.

可用方法

下面是TaggingJS的可用方法用一点描述，它可以接受的论点和返回type:

方法	描述	参数	返回值
add( `text` or `[text]` )	添加一个新标签。	A `String`(或`Array`的`String`)添加为标记，如果`null`我们得到标签框的内容`type_zone`.	`Boolean`或`Funtion`
add:after( `function` )	在添加标记后执行函数。	取决于`function`用作回调。	`Generic`
addSpecialKeys( `[ "type", obj ]` )	添加特殊键以添加或删除标记。	`Array`-何处`"type"`是`"add"`或`"remove"`, `obj`就像`{ key_name: key_code }`(它也可以是`Array`的`obj`).	A `String`因错误或`Object`其实`"type"_key` (`add_key`或`remove_key`).
destroy()	移除`type_zone`所有的标签和其他东西。	`void`	`Boolean`
emptyInput()	空标签盒`type_zone`.	`void`	`$_obj`-质疑`type_zone`本身。
FocusInput()	触发标记框上的焦点`type_zone`.	`void`	`$_obj`-质疑`type_zone`本身。
getDataOptions()	获取数据属性自定义选项。	`void`	`Object`-标签框数据属性自定义选项。
getSpecialKeys()	返回对象内的所有特殊键(不加区别)	`void`	`Object`-作为字符串成员的所有标记。
getSpecialKeysD()	返回对象内的所有特殊键(区别)	`void`	阿`Object`带着`add`和`remove`财产。
getTagsObj()	作为对象返回所有标记	`void`	`Array`-作为对象成员的所有标记。
init()	引导所有事物的init方法	`void`	`$_obj`-jquerify标签框
refresh( `text` )	删除并插入所有标记	A `String`将所有标记分隔为`pre-tags-separator`选项值(如果`null`，我们打电话`getTags`方法)	`Boolean`
remove( `text` or `$_obj` )	移除最后一个标签或标签框中指定的标签`type_zone`.	A `String`或`$_obj`(或`Array`)要移除的标签。	A `String`带有错误信息或`$_obj`去掉的标签。
remove:after( `function` )	删除标记后执行函数。	取决于`function`用作回调。	`Generic`
RemoveAll()	复位别名	`void`	`Array`-所有已删除的标签。
removeSpecialKeys( `[ "type", obj ]` )	取下一个特殊的钥匙。	`Array`-何处`"type"`是`"add"`或`"remove"`, `obj`就像`{ key_name: key_code }`(它也可以是`Array`的`obj`).	`Object`-实际上`"type"_key`(`add_key`或`remove_key`).
reset()	从标签框中移除所有标签`type_zone`	`void`	`Array`-所有已删除的标签。
valInput(`text` )	获取或设置标记框`type_zone`‘’.‘’值	A `String`放入标签框`type_zone`价值。	价值`String`或`$_obj`标签盒的`type_zone`.