Home » jQuery 外掛

[jQ]ImageSelect 1.2

範例 1
沒錯!只要 600 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



當要使用一般傳統的下拉選單來呈現圖片是不行的,但只要透過 ImageSelect 就能輕鬆的把下拉選單轉成圖片的方式來呈現囉。

套件名稱:ImageSelect
套件版本:1.2
作者網站:http://www.liam-galvin.co.uk/imageselect/
套件網址:N/A
發佈日期:2011-07-04
檔案大小:8.47 KB
檔案下載:imageselect.js imageselect.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
width(選填)
描述: 當選單沒展開時的下拉選單的寬,會與 dropdownWidth 相比取其大
預設值: 200
 
height(選填)
描述: 當選單沒展開時的下拉選單的高
預設值: 75
 
dropdownWidth(選填)
描述: 當選單展開時的下拉清單的寬,會與 width 相比取其大
預設值: 75
 
dropdownHeight(選填)
描述: 當選單展開時的下拉清單的高,超過的部份會出現捲軸
預設值: 250
 
z(選填)
描述: z-index
預設值: 99999
 
backgroundColor(選填)
描述: 下拉選單的背景顏色
預設值: '#ffffff'
 
borderColor(選填)
描述: 下拉選單的邊框顏色
預設值: '#cccccc'
 
lock(選填)
描述: 會強制限定下拉清單中的圖片寬或高
預設值: 'height'
 
src(選填)
描述: 當更新時要利用此參數來指定圖片來源
預設值: 無

另外 method 參數是用來決定執行那個動作
method 參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
init
描述: 初始化下拉選單
 
open
描述: 展開下拉清單
 
close
描述: 關閉化下拉選單
 
remove
描述: 恢復成一般下拉選單
 
update
描述: 更新下拉清單的內容,但來源要使用 src 參數

方法說明:

檢視原始碼 JavaScript
1
2
3
// 把一般下拉選單變成圖片下拉選單
// 會依 method 而有 init, update, open, close 及 remove 等功能
$(selector).ImageSelect(method, options);

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="imageselect.css">
<script type="text/javascript" src="imageselect.js"></script>
<script type="text/javascript">
	$(function(){
		// 設定圖片下拉選單的寬為 425px
		$('select[name=logo]').ImageSelect({
			dropdownWidth:425
		});
	});
</script>
 
<body>
	<select name="logo">
		<option value="1">http://www.google.com/logos/2011/fathersday11-hp.jpg</option>
		<option value="2">http://www.google.com/logos/2011/israelbookfair11-hp.jpg</option>
		<option value="3">http://www.google.com/logos/2011/valentinesday11-hp.jpg</option>
		<option value="4">http://www.google.com/logos/2011/ctvrtek11-hp.jpg</option>
	</select>
</body>
範例 1

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

2 筆針對 [jQ]ImageSelect 1.2 的迴響

  1. 不知道這是不是bug
    使用firefox 7.0.1
    下拉後選第一張圖,重覆第二次,在第三次時垂直捲軸會消失
    使用Chrome則是第四次捲軸會消失

發表迴響