帝国cms jQuery Tags标签关键词插件jQuery Tags Input Plugin 方便添加和删除Tags

2018-06-23 23:06:43 围观 :

 jQuery Tags标签关键词插件jQuery Tags Input Plugin 方便添加和删除Tags

简介

一个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的颜色
});

 

jQuery Tags标签关键词插件jQuery Tags Input Plugin 方便添加和删除Tags.zip
文件类型: .zip 22137b3539436f285cd5dc7033033349.zip (130.85 KB)
    匿名评论
  • 评论
人参与,条评论

相关文章

网站分类