jQuery Tags Input Plugin(添加/删除标签插件)详解
看名字应该知道是干嘛用了吧。 @H_
404 _3@
一个jquery开发的标签 功能 加强插件 ,可以生成 或删除 标签 ,还能对输入重复标签 进行检查,和JQuery autocomplete插件 配合实现自动 完成功能 。@H_404 _3@
官网:@H_ 404 _3@
截图:@H_404 _3@
@H_404 _3@@H_404 _3@
(下面是翻译了官网上的用法 ,英文不是很好,有能力的尽量看官网吧)@H_404 _3@
首先,引用下面两个文件 @H_
404 _3@
在你的表单里创建一个包含tags列表的input输入框,你可以在value里设置默认或目前有的tags,并用逗号隔开。@H_404 _3@
然后,简单地给任何一个输入标签 调用 tagsInput()函数 ,它便会被当作一个tags列表处理 @H_
404 _3@
如果你想使用jQuery.autocomalete(自动 完成插件 )配合使用,那么在函数 里增加 一个带autocomplete url的参数。@H_404 _3@
如果你使用了bassistance.de这个网站上的jQuery.autocomplete插件 ,还可以增加 额外的参数来加强autocomplete插件 ,就像下面描述的这样。@H_404 _3@
PS:需要注意的是,demo里默认用的是jquery ui autocomplete,如果你想要测试jquery.autocomplete,要把头部被注释掉的引用文件 去掉注释,并将$('#tags').tagsInput({})中autocomplete_url的地址改为相应的jquery.autocomplete的文件 。具体看页面 上有说明。@H_404 _3@
你还可以使用addTag() and removeTag()函数 增加 和删除 掉标签 ,如以下:@H_404 _3@
你还可以用imporTags()方法 导进一组tag列表,需要注意的是这样会将value里设置的默认tag替换掉@H_404 _3@
所以如果importTags()里不带值的话,就是重置input里的标签 值(注意引号要保留,可以理解为给它传空值。)@H_404 _3@
可以使用tagExist()判断一个标签 是否存在:@H_404 _3@
如果想要在增加 或移除掉标签 的时候增加 额外的功能 或触发其它动作,你可以通过onAddTag和onRemoveTag这两个参数里指定回调函。这两个函数 都返回了一个标签 值作为参数(原文: Both functions should accept a single tag as the parameter.)
@H_404 _3@
增加了'+tag)
},onRemoveTag:function(tag){
console.log('
删除 了'+tag)
}
});
如果你想禁止 增加 标签 ,或者你想提供其它交互方式增加 标签 ,可以增加 一个值为false的interactive参数,这样就禁止 了增加 标签 ,而其它的功能 和呈现都跟原来一样。
@H_404 _3@
如果你想要在每次增加 /删除 一个标签 的时候调用 一个函数 ,可以增加 onChange的参数,并设置回调函数 @H_404 _3@
默认情况下,如果鼠标位于一个标签 后面,按退格键会删除 掉那个标签 。如果你想禁止 这个,设置removeWithBackspace参数为false即可。@H_404 _3@
参数:
@H_
404 _3@
自动完成
插件 的
文件 地址,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的颜色
});
以上就是本文的全部内容 ,希望能给大家一个参考,也希望大家多多支持 编程之家。@H_404 _3@ 原文链接:https://www.f2er.com/jquery/47754.html