jQuery外掛程式jRange滑動選取數值範圍---使用心得

標籤：jquer   hidden   引用   簡單   區間   target   9.png   圖片   article   

最近做商城的時候，需要做選擇價格區間的這麼一個功能，為了讓選擇更加直觀，更加靈活；在網上搜尋到了一款不錯的外掛程式，一款jQuery外掛程式jRange：

官網地址：http://nitinhayaran.github.io/jRange/demo/
Git地址：https://github.com/nitinhayaran/jRange

該外掛程式使用起來也比較簡單（而且官網也有詳細說明）：

首先引入兩個檔案：<link rel="stylesheet" type="text/css" href="css/jquery.range.css">

                         <script type="text/javascript" src="js/jquery.range.js"></script>（當然還有jquery-1.11.3.min.js，畢竟該外掛程式是以jquery開發的）

 

html部分代碼：<input type="hidden" id="range" class="slider-input" value="3000" />

js部分：      

$(‘.slider-input‘).jRange({
from: 0,
to: 10000,
step: 1,
format: ‘%s‘+‘元‘,
width: 240,
showLabels: true,
isRange : true
});

以上就是引用過程，就是這麼簡單！

下面是選項配置（圖片來自於http://www.jb51.net/article/62235.htm）：

上面的一些選項配置可以滿足需求，不過，漏了一個我覺得比較重要配置上面沒寫出來（雖然官網也有介紹），那就是：onstatechange選項，該選項就是說每當使用者更改值時，這個函數就會被調用。同樣的值也會自動為所提供的隱藏輸入設定。對於單個滑塊值沒有逗號，但對於範圍選取器值是逗號分隔的。

以上就是我要分享的全部內容！！！

jQuery外掛程式jRange滑動選取數值範圍---使用心得