當要使用一般傳統的下拉選單來呈現圖片是不行的,但只要透過 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> |
不知道這是不是bug
使用firefox 7.0.1
下拉後選第一張圖,重覆第二次,在第三次時垂直捲軸會消失
使用Chrome則是第四次捲軸會消失
應該是計算的時間差所造成的, 打開 js 在 197 行試著補上