Home » jQuery 外掛

[jQ]JQ Slider

範例 1
沒錯!只要 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

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

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

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;
}

發表迴響