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> |
備註:
若要自訂主題樣式時,要遵循以下規則:
檢視原始碼 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; } |