ImageSelect 實際執行畫面

如果在設計網頁時，需要使用者選擇某一個圖片大部分的設計師都會選擇使用 radio 的表單元素來使用，但是如果有大量資料的話又會佔用了很多的空間，那就來試試這一個基於 jQuery 框架開發的 ImageSelect 把圖片放進 select 的表單元素之內。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//ImageSelect 的主程式碼
<script src="/imageselect/imageselect.js" type="text/javascript"></script>


然後在 header 的部份加上CSS
 .jqis{
     position:relative;
}
.jqis_header{
     background-image: url('dropdown_arrow.png');
     background-position: right center;
     background-repeat:no-repeat;
     cursor:pointer;
}
.jqis_header img{
     cursor:pointer;
}
.jqis_dropdown{
    padding: 5px;
    position:absolute;
    overflow-x:hidden;
    overflow-y:scroll;
}
.jqis_dropdown img{
    margin-right:3px;
    cursor:pointer;
    float:left;
}

接下來在表單元素 select 的部分
<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> <!-- 上列表圖片連結為 Google Doodles -->


最後加入 JavaScript
$(function(){
     $('select[name=logo]').ImageSelect();
});
ImageSelect 可使用的方法列表

方法	說明
init	初始化套件方法
open	顯示或隱藏下拉部分元素透過動畫方式(toggle)
close	隱藏下拉部分元素
remove	刪除圖像回復到原本
update	加入新的圖片

ImageSelect 可使用的參數列表

參數	預設	說明
width	200	元素的寬度
height	75	元素的高度(超過隱藏)
dropdownWidth	350	下拉選單的寬度
dropdownHeight	250	下拉部分的高度
z	99999	z-index 的數值
backgroundColor	#FFFFFF	背景的顏色
borderColor	#CCCCCC	邊框的顏色
lock	height	鎖定高度或寬度

作者網站：http://www.liam-galvin.co.uk/imageselect/
檔案大小：5.39 KB
檔案下載：http://www.liam-galvin.co.uk/misc/imageselect-demo/imageselect.zip
檔案備份：下載