jQuery滑动选取数值范围插件
2015-11-26 11:54
831 查看
HTML
首先载入jQuery库文件以及jRange相关的css文件:jquery.range.css和插件:jquery.range.js<script src="jquery.js"></script> <link rel="stylesheet" href="jquery.range.css"> <script src="jquery.range.js"></script>
然后在需要展示滑块选择器的位置放入以下代码:
<input type="hidden" class="slider-input" value="23" />
我们使用了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 });
然后运行你的网页,你将看到效果。
选项设置
插件jRange也提供了一些必要的选项设置来满足各种需求。选项 | 说明 | 默认值 |
from | 滑动范围的最小值,数字,如0 | |
to | 滑动范围的最大值,数字,如100 | |
step | 步长值,每次滑动大小 | 1 |
scale | 滑动条下方的尺度标签,数组类型,如[0,50,100] | [from,to] |
showLabels | 布尔型,是否显示滑动条下方的尺寸标签 | true |
showScale | 布尔型,是否显示滑块上方的数值标签 | true |
format | 数值格式 | "%s" |
width | 滑动条宽度 | 300 |
isRange | 是否为选取范围。 | false |
相关文章推荐
- [JavaScript/JQuery] jquery 复选框全选 全不选 反选
- 使用jQuery要注意的问题
- 关于在jquery中使用iscorll实现上拉下拉加载刷新的方法
- jquery选项卡
- ASP.net MVC JQuery学习
- jQuery选择器
- jQuery stop()用法以及案例展示
- jquery网页字体变大小
- Jquery操作select
- [JavaScript/JQuery] jquery 复选框全选 全不选 反选
- jquery表单内容过滤
- jquery选择器实例
- jquery实时监测手机号是否符合规则,并根据手机号检测结果将提交按钮设为不同状态
- jquery表格伸展
- 使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法
- jquery $.each的用法
- jquery获取select选中的值
- jquery全选 反选
- jQuery提示插件alertify使用指南
- jQuery提示插件alertify使用指南