jQuery Tags Input Plugin(添加/刪除標(biāo)簽插件)詳解
看名字應(yīng)該知道是干嘛用了吧。
一個jquery開發(fā)的標(biāo)簽功能加強(qiáng)插件,可以生成或刪除標(biāo)簽,還能對輸入重復(fù)標(biāo)簽進(jìn)行檢查,和JQuery autocomplete插件配合實現(xiàn)自動完成功能。
官網(wǎng):http://xoxco.com/projects/code/tagsinput/
截圖:
(下面是翻譯了官網(wǎng)上的用法,英文不是很好,有能力的盡量看官網(wǎng)吧)
首先,引用下面兩個文件
<script src="jquery.tagsinput.js"></script> <link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
在你的表單里創(chuàng)建一個包含tags列表的input輸入框,你可以在value里設(shè)置默認(rèn)或目前有的tags,并用逗號隔開。
<input name="tags" id="tags" value="foo,bar,baz" />
然后,簡單地給任何一個輸入標(biāo)簽調(diào)用tagsInput()函數(shù),它便會被當(dāng)作一個tags列表處理
$('#tags').tagsInput();
如果你想使用jQuery.autocomalete(自動完成插件)配合使用,那么在函數(shù)里增加一個帶autocomplete url的參數(shù)。
$('#tags').tagsInput({ autocomplete_url:'http://myserver.com/api/autocomplete' });
如果你使用了bassistance.de這個網(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,如果你想要測試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列表,需要注意的是這樣會將value里設(shè)置的默認(rèn)tag替換掉
$('#tags').importTags('foo,bar,baz');
所以如果importTags()里不帶值的話,就是重置input里的標(biāo)簽值(注意引號要保留,可以理解為給它傳空值。)
$('#tags').importTags('');
可以使用tagExist()判斷一個標(biāo)簽是否存在:
if ($('#tags').tagExist('foo')) { ... }
如果想要在增加或移除掉標(biāo)簽的時候增加額外的功能或觸發(fā)其它動作,你可以通過onAddTag和onRemoveTag這兩個參數(shù)里指定回調(diào)函。這兩個函數(shù)都返回了一個標(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)簽,可以增加一個值為false的interactive參數(shù),這樣就禁止了增加標(biāo)簽,而其它的功能和呈現(xiàn)都跟原來一樣。
$('#tags_1').tagsInput({ width:'auto', onRemoveTag:function(tag){ console.log('remover'+'"'+tag+'"') }, interactive:false });
如果你想要在每次增加/刪除一個標(biāo)簽的時候調(diào)用一個函數(shù),可以增加onChange的參數(shù),并設(shè)置回調(diào)函數(shù)
默認(rèn)情況下,如果鼠標(biāo)位于一個標(biāo)簽后面,按退格鍵會刪除掉那個標(biāo)簽。如果你想禁止這個,設(shè)置removeWithBackspace參數(shù)為false即可。
參數(shù):
$(selector).tagsInput({ 'autocomplete_url': url_to_autocomplete_api, //自動完成插件的文件地址,demo里有說明 'autocomplete': { option: value, option: value}, //自動完成插件的參數(shù),demo有說明。(提供個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, //改變一個標(biāo)簽時的回調(diào)函數(shù) 'removeWithBackspace' : true, //是否允許使用退格鍵刪除前面的標(biāo)簽,false為阻止 'minChars' : 0, //每個標(biāo)簽的小最字符 'maxChars' : 0 //每個標(biāo)簽的最大字符,如果不設(shè)置或者為0,就是無限大 'placeholderColor' : '#666666' //設(shè)置defaultText的顏色 });
以上就是本文的全部內(nèi)容,希望能給大家一個參考,也希望大家多多支持腳本之家。
- jQuery實現(xiàn)的簡單動態(tài)添加、刪除表格功能示例
- jQuery實現(xiàn)用戶信息表格的添加和刪除功能
- jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法
- jquery Easyui Datagrid實現(xiàn)批量操作(編輯,刪除,添加)
- jquery 刪除節(jié)點 添加節(jié)點 找兄弟節(jié)點的簡單實現(xiàn)
- jQuery動態(tài)添加與刪除tr行實例代碼
- 使用jquery給指定的table動態(tài)添加一行、刪除一行
- jQuery實現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
- JQuery EasyUI學(xué)習(xí)教程之datagrid 添加、修改、刪除操作
- jQuery實現(xiàn)動態(tài)添加和刪除input框?qū)嵗a
相關(guān)文章
jquery鼠標(biāo)懸停導(dǎo)航下劃線滑出效果
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)懸停導(dǎo)航下劃線滑出效果,菜單鼠標(biāo)懸停出現(xiàn)下劃線,向兩邊擴(kuò)展的效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09Jquery Easyui對話框組件Dialog使用詳解(14)
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui對話框組件Dialog的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12JQuery插件tablesorter表格排序?qū)崿F(xiàn)過程解析
這篇文章主要介紹了JQuery插件tablesorter表格排序?qū)崿F(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05