jRange是個(gè)強(qiáng)大的范圍選擇器(Range Selector)。使用它可以輕松實(shí)現(xiàn)范圍的選擇。用戶可以用通過滑動(dòng)手指輕松選擇范圍:價(jià)格，距離，年齡。。。很適合移動(dòng)端。 話不多說，先上效果圖:
話說HTML5是自帶range選擇器的，
<input name="a" type="range" min="10" max="50" step="5">
只不過。。。。。
H5只能選擇一個(gè)點(diǎn)，不支持范圍選擇，而且加上數(shù)字顯示什么的也麻煩。
jRange可以輕松解決這些問題。好用又實(shí)在！源碼可以在gitHub上下載。
由于官方文檔是英文的, 在這里給大家大概翻譯一下使用方法。
使用方法
1.在<head>中加入需要的css和js資源
<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.js"></script>
<script src="jquery.range.js"></script>
注意, gitHub的源碼中是沒有jquery.js的，需要自己下載。
2.在需要用到選擇器的地方加入
<input type="hidden" id="age-slider" value="23,40" />
這里的id名是自定義的，也可以用class,只要和下面的js選擇器保持一致就行。value的兩個(gè)值是隨著用戶的拖動(dòng)而變化的。
3.在body底部加入
<script>
$(document).ready(function(){
$('#age-slider').jRange({
from: 18,
to: 100,
step: 1,
format: '%s',
width: 300,
showLabels: true,
showScale: false,
isRange : true,
theme: "theme-blue"
});
});
</script>
輕松三部，一個(gè)選擇器就實(shí)現(xiàn)啦。
下面來講一下配置:
| 選項(xiàng) | 必選 | 類型 | 說明 |
|---|---|---|---|
| from | 必選 | Integer | 最小值 |
| to | 必選 | Integer | 最大值 |
| step | 可選 | Integer | 增量 (默認(rèn)為1) |
| scale | 可選 | Array | 刻度條。例如[0,50,100] |
| showLabels | 可選 | Boolean | 顯示標(biāo)簽(默認(rèn)true) |
| showScale | 可選 | Boolean | 顯示刻度(默認(rèn)true) |
| format | 可選 | String/Function | 用來設(shè)置標(biāo)簽的格式 例如"%s 天" |
| width | 可選 | Integer | 寬度(默認(rèn)300) |
| theme | 可選 | String | 主題(默認(rèn)是"theme-green"綠色),還有"theme-blue"藍(lán)色。你可以在jquery.range.less中設(shè)置 |
| isRange | 可選 | Boolean | 是否為范圍(默認(rèn)false,選擇一個(gè)點(diǎn)),如果是true，選擇的是范圍,格式為'1,2' |
| snap | 可選 | Boolean | 是否只允許按增值選擇(默認(rèn)false) |
| disable | 可選 | Boolean | 是否只讀(默認(rèn)false),若為true,只讀模式，無法選擇?？梢杂胘s動(dòng)態(tài)設(shè)置$('.slider').jRange('disable'); $('.slider').jRange('enable'); $('.slider').jRange('toggleDisable'); |
| onstatechange | 可選 | Function | 數(shù)字變化的時(shí)候的回調(diào)函數(shù) |
| ondragend | 可選 | Function | 拖動(dòng)結(jié)束時(shí)的回調(diào)函數(shù) |
| onbarclicked | 可選 | Function | 刻度條被按住時(shí)的回調(diào)函數(shù) |
另外,選擇器的值也可以通過js來動(dòng)態(tài)修改:
改變選中的范圍:$('.slider').jRange('setValue', '10,20');
改變可選的范圍:$('.slider').jRange('updateRange', '0,100');
第二個(gè)參數(shù)是刻度，或者當(dāng)前值
$('.slider').jRange('updateRange', '0,100', '25,50');
$('.slider').jRange('updateRange', '0,100', 25);
