看名字應(yīng)該知道是干嘛用了吧。
一個(gè)jquery開發(fā)的標(biāo)簽功能加強(qiáng)插件，可以生成或刪除標(biāo)簽，還能對(duì)輸入重復(fù)標(biāo)簽進(jìn)行檢查，和JQuery autocomplete插件配合實(shí)現(xiàn)自動(dòng)完成功能。
官網(wǎng)：http://xoxco.com/projects/code/tagsinput/
截圖：
(下面是翻譯了官網(wǎng)上的用法，英文不是很好，有能力的盡量看官網(wǎng)吧)
首先，引用下面兩個(gè)文件
<script src="jquery.tagsinput.js"></script><link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
在你的表單里創(chuàng)建一個(gè)包含tags列表的input輸入框，你可以在value里設(shè)置默認(rèn)或目前有的tags，并用逗號(hào)隔開。
<input name="tags" id="tags" value="foo,bar,baz" />
然后，簡(jiǎn)單地給任何一個(gè)輸入標(biāo)簽調(diào)用tagsInput()函數(shù)，它便會(huì)被當(dāng)作一個(gè)tags列表處理
$('#tags').tagsInput();如果你想使用jQuery.autocomalete（自動(dòng)完成插件）配合使用，那么在函數(shù)里增加一個(gè)帶autocomplete url的參數(shù)。
$('#tags').tagsInput({ autocomplete_url:'http://myserver.com/api/autocomplete'});如果你使用了bassistance.de這個(gè)網(wǎng)站上的jQuery.autocomplete插件，還可以增加額外的參數(shù)來加強(qiáng)autocomplete插件，就像下面描述的這樣。
$('#tags').tagsInput({ autocomplete_url:'http://myserver.com/api/autocomplete', autocomplete:{selectFirst:true,width:'100px',autoFill:true}});PS：需要注意的是，demo里默認(rèn)用的是jquery ui autocomplete，如果你想要測(cè)試jquery.autocomplete，要把頭部被注釋掉的引用文件去掉注釋，并將$('#tags').tagsInput({})中autocomplete_url的地址改為相應(yīng)的jquery.autocomplete的文件。具體看頁面上有說明。
你還可以使用addTag() and removeTag()函數(shù)增加和刪除掉標(biāo)簽，如以下：
$('#tags').addTag('foo');$('#tags').removeTag('bar');你還可以用imporTags()方法導(dǎo)進(jìn)一組tag列表，需要注意的是這樣會(huì)將value里設(shè)置的默認(rèn)tag替換掉
$('#tags').importTags('foo,bar,baz');所以如果importTags()里不帶值的話，就是重置input里的標(biāo)簽值（注意引號(hào)要保留，可以理解為給它傳空值。）
$('#tags').importTags('');可以使用tagExist()判斷一個(gè)標(biāo)簽是否存在：
if ($('#tags').tagExist('foo')) { ... }如果想要在增加或移除掉標(biāo)簽的時(shí)候增加額外的功能或觸發(fā)其它動(dòng)作，你可以通過onAddTag和onRemoveTag這兩個(gè)參數(shù)里指定回調(diào)函。這兩個(gè)函數(shù)都返回了一個(gè)標(biāo)簽值作為參數(shù)(原文： Both functions should accept a single tag as the parameter.)
$('#tags_1').tagsInput({ width:'auto', onAddTag:function(tag){ console.log('增加了'+tag) }, onRemoveTag:function(tag){ console.log('刪除了'+tag) }});如果你想禁止增加標(biāo)簽，或者你想提供其它交互方式增加標(biāo)簽，可以增加一個(gè)值為false的interactive參數(shù)，這樣就禁止了增加標(biāo)簽，而其它的功能和呈現(xiàn)都跟原來一樣。
$('#tags_1').tagsInput({ width:'auto', onRemoveTag:function(tag){ console.log('remover'+'"'+tag+'"') }, interactive:false});如果你想要在每次增加/刪除一個(gè)標(biāo)簽的時(shí)候調(diào)用一個(gè)函數(shù)，可以增加onChange的參數(shù)，并設(shè)置回調(diào)函數(shù)
默認(rèn)情況下，如果鼠標(biāo)位于一個(gè)標(biāo)簽后面，按退格鍵會(huì)刪除掉那個(gè)標(biāo)簽。如果你想禁止這個(gè)，設(shè)置removeWithBackspace參數(shù)為false即可。
參數(shù)：
$(selector).tagsInput({ 'autocomplete_url': url_to_autocomplete_api, //自動(dòng)完成插件的文件地址，demo里有說明 'autocomplete': { option: value, option: value}, //自動(dòng)完成插件的參數(shù)，demo有說明。（提供個(gè)jquery.autocomplete的：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/） 'height':'100px', //設(shè)置高度 'width':'300px', //設(shè)置寬度 'interactive':true, //是否允許添加標(biāo)簽，false為阻止 'defaultText':'add a tag', //默認(rèn)文字 'onAddTag':callback_function, //增加標(biāo)簽的回調(diào)函數(shù) 'onRemoveTag':callback_function, //刪除標(biāo)簽的回調(diào)函數(shù) 'onChange' : callback_function, //改變一個(gè)標(biāo)簽時(shí)的回調(diào)函數(shù) 'removeWithBackspace' : true, //是否允許使用退格鍵刪除前面的標(biāo)簽，false為阻止 'minChars' : 0, //每個(gè)標(biāo)簽的小最字符 'maxChars' : 0 //每個(gè)標(biāo)簽的最大字符，如果不設(shè)置或者為0，就是無限大 'placeholderColor' : '#666666' //設(shè)置defaultText的顏色});以上就是本文的全部?jī)?nèi)容，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
