帝国cms jQuery Tags标签关键词插件jQuery Tags Input Plugin 方便添加和删除Tags
2018-06-23 站长 站长日志
简介
一个jquery开发的标签功能加强插件，可以生成或删除标签，还能对输入重复标签进行检查，和JQuery autocomplete插件配合实现自动完成功能。
使用方法
| 1 2 |
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
|
在你的表单里创建一个包含tags列表的input输入框，你可以在value里设置默认或目前有的tags，并用逗号隔开。
| 1 |
<input name="tags" id="tags" value="foo,bar,baz" />
|
然后，简单地给任何一个输入标签调用tagsInput()函数，它便会被当作一个tags列表处理
| 1 |
$('#tags').tagsInput();
|
你还可以使用addTag() and removeTag()函数增加和删除掉标签，如以下：
| 1 2 |
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
|
你还可以用imporTags()方法导进一组tag列表，需要注意的是这样会将value里设置的默认tag替换掉
| 1 |
$('#tags').importTags('foo,bar,baz');
|
可以使用tagExist()判断一个标签是否存在：
| 1 |
if ($('#tags').tagExist('foo')) { ... }
|
参数：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api, //自动完成插件的文件地址，demo里有说明
'autocomplete': { option: value, option: value}, //自动完成插件的参数，demo有说明。（提供个jquery.autocomplete的：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/）
'height':'100px', //设置高度
'width':'300px', //设置宽度
'interactive':true, //是否允许添加标签，false为阻止
'defaultText':'add a tag', //默认文字
'onAddTag':callback_function, //增加标签的回调函数
'onRemoveTag':callback_function, //删除标签的回调函数
'onChange' : callback_function, //改变一个标签时的回调函数
'removeWithBackspace' : true, //是否允许使用退格键删除前面的标签，false为阻止
'minChars' : 0, //每个标签的小最字符
'maxChars' : 0 //每个标签的最大字符，如果不设置或者为0，就是无限大
'placeholderColor' : '#666666' //设置defaultText的颜色
});
|
上一篇：PHP中的数组函数详解