帝國cms jQuery Tags標簽關鍵詞插件jQuery Tags Input Plugin 方便添加和刪除Tags

2024-08-28 12:24:39

字體：大中小

來源：轉載

供稿：網友

jQuery Tags標簽關鍵詞插件jQuery Tags Input Plugin 方便添加和刪除Tags

簡介

一個jquery開發的標簽功能加強插件，可以生成或刪除標簽，還能對輸入重復標簽進行檢查，和JQuery autocomplete插件配合實現自動完成功能。

使用方法

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

在你的表單里創建一個包含tags列表的input輸入框，你可以在value里設置默認或目前有的tags，并用逗號隔開。

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

然后，簡單地給任何一個輸入標簽調用tagsInput()函數，它便會被當作一個tags列表處理

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

你還可以使用addTag() and removeTag()函數增加和刪除掉標簽，如以下：

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

你還可以用imporTags()方法導進一組tag列表，需要注意的是這樣會將value里設置的默認tag替換掉

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

可以使用tagExist()判斷一個標簽是否存在：

1	`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的顏色
});

            