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 学习笔记二 字符串拼接
Mar 28 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 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
PHP产生随机字符串函数
2006/12/06 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Python中Threading用法详解
2017/12/27 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python制作朋友圈九宫格图片
2019/11/03 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
党员廉洁自律承诺书
2014/05/26 职场文书
建筑管理专业求职信
2014/07/28 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
检讨书怎么写
2015/05/07 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
初中思想品德教学反思
2016/02/24 职场文书