Home » jQuery 外掛

[jQ]JQ Slider

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



JQ Slider 是一個能產生兩個拖曳指示器的外掛。除了允許使用者透過 Slider 來設定最小值及最大值之外，也內建了多組主題樣式，並可自訂屬於自己的主題樣式哩。

不過我覺得這外掛有些地方沒有設想的很周到，所以建議 minValue 不能設成 0 之外，也別把 rangeSelection 設成 false。

套件名稱：JQ Slider
套件版本：N/A
作者網站：http://www.egrappler.com/free-multi-node-range-data-slider-jqslider/
套件網址：N/A
發佈日期：2011-09-27
檔案大小：17.8 KB
檔案下載：jqslider.js jqslider.css
圖檔下載：images.zip

參數選項說明：

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

theme(選填)
描述： Slider 的樣式主題, 內建的有：'default', 'simple', 'blue', 'steel', 'green', 'dark-green', 'orange' 及 'red'
預設值： 'default'
 
minValue(選填)
描述： 最小值(不過若設為 0 時, Slider 下的數值顯示會錯誤)
預設值： 0
 
maxValue(選填)
描述： 最大值
預設值： 10
 
selStart(選填)
描述： 如果 rangeSelection 設為 true 時, 可指定為左邊(最小值)的值
預設值： 0
 
selEnd(選填)
描述： 如果 rangeSelection 設為 true 時, 可指定為右邊(最大值)的值
預設值： 10
 
smallChange(選填)
描述： Slider 每次拖曳時的最小值
預設值： 1
 
animate(選填)
描述： 當點擊數值標籤時是否使用動畫方式移動
預設值： true
 
animationSpeed(選填)
描述： Slider 的動畫速度；單位毫秒(1000毫秒 = 1秒)
預設值： 500
 
ticks(選填)
描述： 是否顯示最小值到最大值間的每一個數值標籤
預設值： true
 
labels(選填)
描述： 是否顯示最小值及最大值標籤
預設值： true
 
rangeSelection(選填)
描述： 如果設為 true 則會產生兩個拖曳指示器(最小值及最大值)
預設值： true
 
dragTitle(選填)
描述： 當滑數移到拖曳指示器上時的提示文字
預設值： 'Drag'
 
callback(選填)
描述： 當 Slider 任一拖曳指示器值改變時觸發的事件
預設值： null

方法說明：

檢視原始碼 JavaScript
1
2

// 產生 Slider
$(selector).jqslider(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

<link type="text/css" rel="stylesheet" href="style/jqslider.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqslider.js"></script>
<style type="text/css">
	#slider {
		margin: 20px 0;
	}
</style>
<script type="text/javascript">
	$(function() {
		// Slider 主題選用 steel
		// 最小值 1, 最大值 10
		// 預設最小值 2, 預設最大值 6
		// 並修改當滑鼠移到拖曳指示器上的提示文字
		$('#slider').jqslider({
			theme: 'steel', 
			minValue: 1,
			maxValue: 10, 
			selStart: 2,
			selEnd: 6, 
			dragTitle: '拖曳我', 
			callback: function(selectionStart, SelectionEnd){
				// 當滑鼠每拖曳時顯示最小及最大值
				$('#msg').html('Min:' + selectionStart + ', Max:' + SelectionEnd);
			}
		});
	});
</script>
 
<body>
	<div id="slider"></div>
	<div id="msg"></div>
</body>

範例 1

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

備註：
若要自訂主題樣式時，要遵循以下規則：

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

.slider.主題名稱
{
    background-color: #D2DBEC;
    border: 1px solid #299BC9;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    width: 200px;
    height: 4px;
    background-image: -o-linear-gradient(#ADC7EB, #D2DBEC);
}
.inner.主題名稱
{
    background: #299BC9;
    -moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
    -webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
}
.draghandle.主題名稱
{
    width: 8px;
    height: 20px;
    background-color: #299BC9;
}
.draghandle.主題名稱.selected
{
    background-color: #ADC7EB;
}

發表迴響