有時我們在頁面上需要選擇數值範圍,如購物時選取價格區間,購買主機時自主選取CPU,記憶體大小配置等,使用直覺的滑桿條直接選取想要的數值大小即可,無需手動輸入數值,操作簡單又方便。
HTML
首先載入jQuery庫檔案以及jRange相關的css檔案:jquery.range.css和外掛程式:jquery.range.js
然後在需要展示滑桿選擇器的位置放入以下程式碼:
我們使用了hiiden類型的文字域,設定預設值value,如23。
jQuery
呼叫jRange外掛非常簡單,直接用下面的程式碼:
然後運行你的網頁,你將看到DEMO中的效果。
選項設定
外掛程式jRange也提供了一些必要的選項設定來滿足各種需求。
選項 | 說明 | 預設值 |
from | 滑動範圍的最小值,數字,如0 | |
to | 滑動範圍的最大值,數字,如100 | |
step | 步長值,每次滑動大小 | 1 |
scale | 滑動條下方的尺度標籤,陣列類型,如[0,50,100] | [from,to] |
showLabels | 布林型,是否顯示滑動條下方的尺寸標籤 | true |
showScale | 布林型,是否顯示滑桿上方的數值標籤 | true |
format | 數值格式 | "%s" |
幅 | スライダーバーの幅 | 300 |
範囲 | 選択範囲かどうか。 | 偽 |
詳細については、jRange プロジェクトの公式 Web サイトを参照してください: https://github.com/nitinhayaran/jRange
上記はこの記事の全内容です。必要な方は参考にしていただければ幸いです。