Home » jQuery 外掛

[jQ]ImageSelect 1.2

[ 日期： | 瀏覽：6,598 | 迴響：2 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 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則是第四次捲軸會消失

發表迴響