Home » jQuery 外掛

[jQ]Custom select boxes with icons

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



一般的下拉選單都是只有很單純的文字內容，若能加上相關的圖示來輔助的話，相信會讓使用者更清楚項目的用途。不過單靠基本的下拉選單是做不到的，所以需要的話，可以使用 Custom select boxes with icons 套件來加強效果。

套件名稱：Custom select boxes with icons
套件版本：N/A
作者網站：http://www.adelaidewebdesigns.......ases-customselect-with-icons/
套件網址：http://plugins.jquery.com/project/customselectboxes
發佈日期：2008-08-01
檔案大小：1.30 KB
檔案下載：jquery.customselect.js

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的下拉選單元素轉成自訂的圖示化選單
$(selector).customSelect();

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.customselect.js"></script>
<style type="text/css">
#iconselect {
	background: url(images/select-bg.gif) no-repeat;
	height: 25px;
	width: 250px;
	font: 13px Arial, Helvetica, sans-serif;
	padding-left: 15px;
	padding-top: 4px;
}
.selectitems {
	width: 230px;
	height: 25px;
	border-bottom: dashed 1px #ddd;
	padding-left: 10px;
	padding-top: 2px;
}
.selectitems span {
	margin-left: 5px;
}
#iconselectholder {
	width: 250px;
	overflow: auto;
	display: none;
	position: absolute;
	background-color:#fff5ec;
}
.hoverclass{
	background-color: #fff;
	cursor: pointer;
}
.selectedclass{
	background-color: #ff9;
}
</style>
<script type="text/javascript">
	$(function(){
		$('#customselector').customSelect();
	});
</script>
 
<body>
	<select name="select" class="customselect" title="請選擇圖示" id="customselector">
		<option value="icon1" id="icon1" title="images/attention.gif">Attention icon</option>
		<option value="icon2" id="icon2" title="images/backward.gif">Back Icon</option>
		<option value="icon3"  id="icon3" title="images/base.gif">Base Icon</option>
	</select>
</body>
範例 1

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

附註：
下拉選項的圖示是依靠 title 來設定圖示及路徑的。另外，若覺得把下拉選單展開/收合的方式改成 slideDown/ slideUp 會比較好的話，可自行修改 jquery.customselect.js 中的第 13 及 27 中的 toggle 為 slideToggle。

下拉選單的外型圖片：
select-bg.gif

3 筆針對 [jQ]Custom select boxes with icons 的迴響

  1. 男丁格爾老師，如果要加入連結，該如何處理 在清單值中加入還是必須寫到jquery.js中~~謝謝

  2. 請問老師，如果要配合客戶資料庫時要使option被選中用戶的值，要如何修改
    我有用selected寫在option裡無效
    謝謝

發表迴響