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 相关文章推荐
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
javascript类型转换使用方法
Feb 08 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
如何提高Dom访问速度
Jan 05 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
数据库相关问题
2006/10/09 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php合并js请求的例子
2013/11/01 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
js返回前一页刷新本页重载页面
2014/07/29 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
python实现事件驱动
2018/11/21 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
python圣诞树编写实例详解
2020/02/13 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
超级实用的8个Python列表技巧
2020/08/24 Python
详解Python中的Lock和Rlock
2021/01/26 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
伦敦奥运会的口号
2014/06/21 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS