Home » jQuery 外掛

[jQ]jQuery Mega Select List 3.0.4

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



jQuery Mega Select List 可以利用設定或是 optgroup 來把原本呆板的下拉選單轉換成可以讓使用者一目了然且帶有標題的清單項目。

套件名稱：jQuery Mega Select List
套件版本：3.0.4
作者網站：http://www.stevefenton.co.uk/Content/Jquery-Mega-Select-List/
套件網址：N/A
發佈日期：2011-09-23
檔案大小：8.54 KB
檔案下載：jquery.megaselectlist.js

參數選項說明：

檢視原始碼 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

classmodifier(選填)
描述： Mega Select List 所套用的 class 樣式，如果有命名衝突的話，可以透過此參數修改
預設值： "megaselectlist"
 
headers(選填)
描述： 若沒有使用 optgroup 的話，則可指定標題來源
預設值： "rel"
 
animate(選填)
描述： 設定選項是固定展開還是利用動畫方式展開；若設為 true 則會觸發後才展開
預設值： false
 
animateevent(選填)
描述： 觸發選項展開的事件；要 animate 設為 true 才有效
預設值： "mouseover"
 
multiple(選填)
描述： 是否允許多選
預設值： false
 
maximumitems(選填)
描述： 當允許多選時，可指定最多可以選擇多少選項(設成 0 表示不限制)
預設值： 0
 
warningmessage(選填)
描述： 當多選的選項數量超出最多數量限制時的警告訊息
預設值： "You can only select {0} items"
 
itemseparator(選填)
描述： 當多選時的每一項目的分隔符號
預設值： ", "
 
hideloading(選填)
描述： 在載入時是否直接隱藏選項，若設為 false 則會先展開後再用動畫方式縮小隱藏
預設值： false
 
isxhtml(選填)
描述： 設定是否使用 XHTML 的標準(主要差在 selected 屬性值的設定方式)
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的 select 轉換成 Mega Select List 效果
$(selector).megaselectlist(settings);

使用範例：

檢視原始碼 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.megaselectlist.js"></script>
<style type="text/css">
	/* Recommended styles */
	.megaselectlistcolumn {
		width: 23%;	/* 這會影響一次顯示幾列選項 */
		margin: 0 1%;
		float: left;
	}
	.megaselectlist .currentitem {
		padding: 0;
		border: 0.1em dotted Green;
		color: Black;
	}
	/* Optional styles */
	.megaselectlist {
		background-color: #F5F5F5;
		border: 1px solid Silver;
	}
	.megaselectlistcolumn > h2 {
		font-size: 1em;
		background-color: #ECECEC;
		text-align: center;
		padding: 2px 0;
		margin: 0;
	}
	.megaselectlist > p {
		margin: 0.2em;
	}
	.megaselectlistcolumn > ul {
		padding-left: 1em;
		margin: 0;
		color: Gray;
	}
	.megaselectlistcolumn > ul > li {
		cursor: pointer;
		padding: 0.1em;
		font-size: small;
	}
	.megaselectlistcolumn > ul > li:hover {
		background-color: #ECECEC;
		color: Black;
	}
 
 
	form {
		width: 600px;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 把 #example1 轉換成 Mega Select List 效果
		// 選項使用動畫方式展開並最多允許 3 個
		$("#example1").megaselectlist({
			animate: true, 
			animateevent: "click",
			multiple: true,
			maximumitems: 3,
			warningmessage: "最多選擇 {0} 個項目",
		});
	});
</script>
 
<body>
	<form>
		<p>
			<label for="example1">請選擇</label>
			<select name="example1" id="example1">
				<optgroup label="Link">
					<option value="24">男丁格爾's 脫殼玩</option>
					<option value="25">jQuery</option>
					<option value="26">jQuery UI</option>
					<option value="27">jQuery Mobile</option>
				</optgroup>
				<optgroup label="Hampshire">
					<option value="1">Andover</option>
					<option value="2">Alton</option>
					<option value="3">Basingstoke</option>
					<option value="4">Fareham</option>
					<option value="5">Portsmouth</option>
					<option value="6">Romsey</option>
					<option value="7">Southampton</option>
					<option value="8">Waterlooville</option>
					<option value="9">Winchester</option>
				</optgroup>
				<optgroup label="Dorset">
					<option value="9">Blandford</option>
					<option value="10">Bournemouth</option>
					<option value="11">Christchurch</option>
					<option value="12">Ferndown</option>
					<option value="13">Poole</option>
					<option value="14">Verwood</option>
					<option value="15">Wareham</option>
					<option value="16">Weymouth</option>
					<option value="17">Wimbourne</option>
				</optgroup>
				<optgroup label="Wiltshire">
					<option value="18">Devizes</option>
					<option value="19">Frome</option>
					<option value="20">Salisbury</option>
					<option value="21">Trowbridge</option>
					<option value="22">Warminster</option>
					<option value="23">Westbury</option>
				</optgroup>
			</select>
		</p>
	</form>
</body>
範例 1

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

1 筆針對 [jQ]jQuery Mega Select List 3.0.4 的迴響

發表迴響