Home » jQuery 外掛

[jQ]jQuery TagBox 1.0.1

[ 日期： | 瀏覽：14,274 | 迴響：7 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



jQuery TagBox 外掛套件可以用在會需要 Tag 的系統上。除了可以讓使用者自行輸入文字來產生標籤之外，它也可以利用現成的下拉選單來當做標籤的來源供使用者直接選擇。

套件名稱：jQuery TagBox
套件網址：1.0.1
作者網站：http://www.geektantra.com/2011/05/jquery-tagbox-plugin/
套件網址：N/A
發佈日期：2011-06-02
檔案大小：8.53 KB
檔案下載：jquery.tagbox.js jquery.tagbox.css

參數選項說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

separator(選填)
描述： 用來分隔每一個標籤的區隔符號
預設值： ','
 
className(選填)
描述： 要套用到 TagBox 的 className 的前綴
預設值： 'tagBox'
 
tagInputClassName(選填)
描述： 要套用到 TagBox 中的輸入方塊的 className
預設值： ''
 
tagButtonClassName(選填)
描述： 要套用到 TagBox 中的按鈕的 className
預設值： ''
 
tagButtonTitle(選填)
描述： TagBox 中的按鈕的顯示文字
預設值： 'Add Tag'
 
confirmRemoval(選填)
描述： 若設為 true 時, 當使用者要移除標籤時會出現確認方塊
預設值： false
 
confirmRemovalText(選填)
描述： 移除標籤的確認訊息
預設值： 'Do you really want to remove the tag?'
 
completeOnSeparator(選填)
描述： 若設為 false 時, 當輸入到指定的分隔符號時不會自動新增標籤
預設值： true
 
completeOnBlur(選填)
描述： 若設為 true 時, 當輸入框失去焦點時會自動新增標籤
預設值： false
 
readonly(選填)
描述： 若設為 true 時, 則 TagBox 只能唯讀
預設值： false
 
enableDropdown(選填)
描述： 若設為 true 時, 則會使用下拉選單的方式來輸入標籤
預設值： false
 
dropdownSource(選填)
描述： 下拉選單的資料來源, 可以是一個 jQuery 物件或是 JSON 格式的資料
預設值： function() {}
 
dropdownOptionsAttribute(選填)
描述： 下拉選單項目的來源屬性
預設值："title"
 
removeTagText(選填)
描述： 移除標籤的按鈕文字
預設值："X"
 
maxTags(選填)
描述： 標籤可新增的最大數量; -1 表示無限制
預設值：-1
 
maxTagsErr(選填)
描述： 當標籤的數量大於 maxTags 限制時
預設值：function(max_tags) { alert("A maximum of "+max_tags+" tags can be added!"); }
 
beforeTagAdd(選填)
描述： 標籤新增前要執行的動作
預設值：function(tag_to_add) {}
 
afterTagAdd(選填)
描述： 標籤新增後要執行的動作
預設值：function(added_tag) {}

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的元素轉換成 TagBox 效果
$(selector).tagBox(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<link type="text/css" rel="stylesheet" href="jquery.tagbox.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tagbox.js"></script>
<style type="text/css">
	div.row {
		padding: 10px;
	}
	div.row label {
		font-weight: bold;
		display: block;
		padding: 0 0 10px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 產生一個基本的 TagBox, 預設可以用逗號區隔多筆
		$('#jquery-tagbox-text').tagBox();
 
		// 產生一個有下拉選單的 TagBox
		// Tag 來源是從 #jquery-tagbox-select-options
		$('#jquery-tagbox-select').tagBox({ 
			enableDropdown: true, 
			dropdownSource: function() {
				return $('#jquery-tagbox-select-options');
			}
		});
	});
</script>
 
<body>
	<div class="row">
		<label for="jquery-tagbox-text">Text TagBox (用逗號區隔多筆)</label>
		<input type="text" id="jquery-tagbox-text" />
	</div>
 
	<div class="row">
		<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>
		<input type="text" id="jquery-tagbox-select" />
	</div>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

7 筆針對 [jQ]jQuery TagBox 1.0.1 的迴響

  1. 老師您好，

    我想將Tag之資料存進資料庫內，但不知如何抓取值，請問老師如何抓取已Tag的值呢？

    • 老師您好，

      已經解決了，不用麻煩老師了，謝謝您~

      var tagValue = document.getElementById('jquery-tagbox-select');
      alert(tagValue.value);

        • 老師您好，

          不好意思，我又遇到問題了...我現在可以將資料存進資料庫，但請問老師怎麼將資料庫內的Tag資料顯示在"jquery-tagbox-selec"內？譬如資料庫內存的資料為"jQuery,Dojo"，讀取後，如何將它以如同按下ADD TAG的顯示方式顯示？
          麻煩老師了~謝謝您~

          • 直接把這 "jQuery,Dojo" 設定在你的輸入方塊中的 value 上就可以了

          • 老師您好，

            順利解決了！真的很謝謝您~

  2. Hi there! Someone in my Myspace group shared this website with us so I came to take a look. I'm definitely enjoying the information. I'm book-marking and will be tweeting this to my followers! Exceptional blog and great design and style.

發表迴響