菜单导航:jQuery Tags标签关键词插件jQuery Tags Input Plugin 方便添加和删除Tags

系统分类:代码 - 网页代码 - 菜单导航 yecha 2015-06-25 10:39:33 上传

版权信息: "菜单导航"栏目内,站内会员所分享的全部资料,仅供学习与参考,版权为原作者所有。
yecha加关注
江苏省淮安市 / 设计师
标签:tags   关键词   标签   jQuery插件

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

简介

一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能。

使用方法

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />


在你的表单里创建一个包含tags列表的input输入框,你可以在value里设置默认或目前有的tags,并用逗号隔开。

<input name="tags" id="tags" value="foo,bar,baz" />


然后,简单地给任何一个输入标签调用tagsInput()函数,它便会被当作一个tags列表处理

$('#tags').tagsInput();


你还可以使用addTag() and removeTag()函数增加和删除掉标签,如以下:

$('#tags').addTag('foo');
$('#tags').removeTag('bar');


你还可以用imporTags()方法导进一组tag列表,需要注意的是这样会将value里设置的默认tag替换掉

$('#tags').importTags('foo,bar,baz');

可以使用tagExist()判断一个标签是否存在:

if ($('#tags').tagExist('foo')) { ... }


参数:

$(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的颜色
});


素材人气
  • 浏览:
  • 收藏:
  • 评论:
  • 推荐:
  • 附件下载:
yecha
江苏省淮安市 / 设计师
2015-06-25 10:39:33发布
全部评论()
全部推荐()