首頁 >web前端 >js教程 >jQuery jRange實作滑動選取數值範圍特效_jquery

jQuery jRange實作滑動選取數值範圍特效_jquery

WBOY
WBOY原創
2016-05-16 16:09:391856瀏覽

有時我們在頁面上需要選擇數值範圍,如購物時選取價格區間,購買主機時自主選取CPU,記憶體大小配置等,使用直覺的滑桿條直接選取想要的數值大小即可,無需手動輸入數值,操作簡單又方便。

HTML

首先載入jQuery庫檔案以及jRange相關的css檔案:jquery.range.css和外掛程式:jquery.range.js

複製程式碼 程式碼如下:




然後在需要展示滑桿選擇器的位置放入以下程式碼:

複製程式碼 程式碼如下:


我們使用了hiiden類型的文字域,設定預設值value,如23。

jQuery

呼叫jRange外掛非常簡單,直接用下面的程式碼:

複製程式碼 程式碼如下:

$('.single-slider').jRange({
    from: 0,
    to: 100,
    step: 1,
    scale: [0,25,50,75,100],
    format: '%s',
    width: 300,
    showLabels: true,
    showScale: true
});

然後運行你的網頁,你將看到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

上記はこの記事の全内容です。必要な方は参考にしていただければ幸いです。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn