欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery Tags Input Plugin(添加/刪除標(biāo)簽插件)詳解

 更新時(shí)間:2016年06月20日 09:48:12   作者:沫魚  
本文主要介紹jQuery Tags Input Plugin添加/刪除標(biāo)簽插件的用法,非常實(shí)用,有需要的朋友可以參考一下。

看名字應(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/

截圖:

http://img.jbzj.com/file_images/article/201606/201606201005583.png

(下面是翻譯了官網(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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論