Home » jQuery 外掛

[jQ]ddSlick 1.0

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



傳統的下拉選單都長的差不多一個樣，且也無法直接放置圖片等額外的內容。而 ddSlick 這外掛套件就是要讓你的下拉選單有圖有標題又有描述可以顯示。而像是指定預設項目或是當選擇某一項目時的 Callback 函式都是有提供的喔！

套件名稱：ddSlick
套件網址：1.0
作者網站：http://designwithpc.com/Plugins/ddSlick
套件網址：N/A
發佈日期：2012-05-17
檔案大小：14.3 KB
檔案下載：jquery.ddslick.js

參數選項說明：

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

data(選填)
描述： 下拉選單的資料來源, 每一個項目是要用 JSON 格式來表示 { text: 'Facebook', value: 1, description: '人人都愛用臉書, 不過男丁格爾沒有用臉書', imageSrc: 'images/facebook-icon-32.png' }
預設值： []
 
width(選填)
描述： 下拉選單的寬度
預設值： 260
 
height(選填)
描述： 下拉選單的高度
預設值： null
 
background(選填)
描述： 下拉選單的背景顏色
預設值： "#eee"
 
selectText(選填)
描述： 當還沒選擇任何項目時的提示文字
預設值： ""
 
imagePosition(選填)
描述： 設定下拉選單項目的圖片位置：允許的值有 "left" 及 "right"
預設值： "left"
 
showSelectedHTML(選填)
描述： 若設為 false 時, 當選擇到某項目後, 就只會顯示標題而不顯示描述內容
預設值： true
 
defaultSelectedIndex(選填)
描述： 下拉選單預設選取的項目索引
預設值： null
 
truncateDescription(選填)
描述： 若設為 false 時, 當選擇到某項目後, 會完整的顯示描述內容
預設值： true
 
clickOffToClose(選填)
描述： 若設為 false 時, 只有點擊到下拉選單才會關閉
預設值： true
 
onSelected(選填)
描述： 當點選到某一項目時執行的函式
預設值： function () { }

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 把指定的區塊轉換成 ddSlick 下拉選單
$(selector).ddslick(method);
 
// 指定 ddSlick 元素的選取項目
$(selector).ddslick('select', options);

使用範例：

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ddslick.js"></script>
<script type="text/javascript">
	$(function(){
		// 下拉選單的資料來源
		var ddData = [
			{
				text: 'Facebook',
				value: 1,
				description: '人人都愛用臉書, 不過男丁格爾沒有用臉書',
				imageSrc: 'images/facebook-icon-32.png'
			},
			{
				text: 'Twitter',
				value: 2,
				description: 'Description with Twitter',
				imageSrc: 'images/twitter-icon-32.png'
			},
			{
				text: 'LinkedIn',
				value: 3,
				description: 'Description with LinkedIn',
				imageSrc: 'images/linkedin-icon-32.png'
			},
			{
				text: 'Foursquare',
				value: 4,
				description: 'Description with Foursquare',
				imageSrc: 'images/foursquare-icon-32.png'
			}
		];
 
		// 把 #myDropdown 轉換成 ddslick 下拉選單
		$('#myDropdown').ddslick({
			data: ddData,
			width: 300,
			selectText: '請選擇你最常用的社交工具'
		});
	});
</script>
 
<body>
	<div id="myDropdown"></div>
</body>
範例 1

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

發表迴響