2013年2月4日 星期一

jQuery 標籤選取器- TagBox

tagbox
想要做漂亮的tag選擇器嗎? 這邊有一個現成的可以試試看。
jQuery useful TagBox Plugin

首先照他的格式準備html

<label for="jquery-tagbox-text">Text TagBox (Comma Separated)</label>
<input type="text" id="jquery-tagbox-text" />


最簡單的使用像這樣
  1. $("#jquery-tagbox-text").tagBox();  

要用select選取的話

<label for="jquery-tagbox-select">Dropdown TagBox</label>
<select name="" id="jquery-tagbox-select-options">
<option value="jQuery">jQuery</option>
<option value="MooTools">MooTools</option>
<option value="ProtoType">ProtoType</option>
<option value="Scriptaculous">Scriptaculous</option>
<option value="Dojo">Dojo</option>
</select><!--select#-->
<input type="text" id="jquery-tagbox-select" />


  1. ("#jquery-tagbox-select").tagBox({    
  2.     enableDropdown: true,    
  3.     dropdownSource: function() {   
  4.     return jQuery("#jquery-tagbox-select-options");   
  5.     }   
  6. });  

plugin的網頁還有更多的使用說明。

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...