jQuery+jRange实现滑动选取数值范围特效


Posted in Javascript onMarch 14, 2015

有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。

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 

});

然后运行你的网页,你将看到DEMO中的效果。

选项设置

插件jRange也提供了一些必要的选项设置来满足各种需求。

选项 说明 默认值
from 滑动范围的最小值,数字,如0  
to 滑动范围的最大值,数字,如100  
step 步长值,每次滑动大小 1
scale 滑动条下方的尺度标签,数组类型,如[0,50,100] [from,to]
showLabels 布尔型,是否显示滑动条下方的尺寸标签 true
showScale 布尔型,是否显示滑块上方的数值标签 true
format 数值格式 "%s"
width 滑动条宽度 300
isRange 是否为选取范围。 false

更多信息请参阅jRange项目官网:https://github.com/nitinhayaran/jRange

以上就是本文的全部内容了,有需要的小伙伴参考下,希望大家能够喜欢。

Javascript 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
js实现随机点名
Jan 19 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 #Javascript
You might like
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
express 项目分层实践详解
2018/12/10 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
社区文艺活动方案
2014/08/19 职场文书
校友回访母校寄语
2015/02/26 职场文书
摘录式读书笔记
2015/07/01 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Mysql案例刨析事务隔离级别
2021/09/25 MySQL