jQuery插件jRange滑动选取数值范围---使用心得

最近做商城的时候,需要做选择价格区间的这么一个功能,为了让选择更加直观,更加灵活;在网上搜索到了一款不错的插件,一款jQuery插件jRange:

官网地址:http://nitinhayaran.github.io/jRange/demo/
Git地址:https://github.com/nitinhayaran/jRange

该插件使用起来也比较简单(而且官网也有详细说明):

首先引入两个文件:<link rel="stylesheet" type="text/css" href="css/jquery.range.css">

<script type="text/javascript" src="js/jquery.range.js"></script>(当然还有jquery-1.11.3.min.js,毕竟该插件是以jquery开发的)

html部分代码:<input type="hidden" id="range" class="slider-input" value="3000" />

js部分:

$(‘.slider-input‘).jRange({
from: 0,
to: 10000,
step: 1,
format: ‘%s‘+‘元‘,
width: 240,
showLabels: true,
isRange : true
});

以上就是引用过程,就是这么简单!

下面是选项配置(图片来自于http://www.jb51.net/article/62235.htm):

上面的一些选项配置可以满足需求,不过,漏了一个我觉得比较重要配置上面没写出来(虽然官网也有介绍),那就是:onstatechange选项,该选项就是说每当用户更改值时,这个函数就会被调用。同样的值也会自动为所提供的隐藏输入设置。对于单个滑块值没有逗号,但对于范围选择器值是逗号分隔的。

以上就是我要分享的全部内容!!!

时间: 2024-11-05 21:54:04

jQuery插件jRange滑动选取数值范围---使用心得的相关文章

jQuery滑动选取数值范围插件

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"></scr

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动.滚动插件 : http://www.cnblogs.com/linJie1930906722/p/6072984.htm

jcDate时间选取jQuery插件

jquery插件库 源于:http://www.huiyi8.com/sc/6294.html

非常不错的手机网页滑动效果,求此jQuery 插件

  不止一次在微信的分享上面看到这种效果的网页.可是不知道到底是用什么技术做出来的.查看源码也看不出个所以然,上次有个客户要做这种效果,实在是做不出来.后来没法,用flexslider做的.可是感觉效果差好多.请各位大神指教一下.是用什么jQuery 插件做的.附上URL:http://r.xiumi.us/stage/v3/281su/260039?from=timeline&isappinstalled=0#/0/0 用chrome 可以访问,IE 有可能无法访问.

SMINT:单页网站的免費jQuery插件

最近为了做一个静态网页版的数据报告,不希望花很多时间去设计网页,或者花时间去调整布局,于是找到了一个名为Smint的免費jQuery插件.几乎不需要写什么代码就可以完成一个一页式网站.这非常适合用来制作静态网页,比如个人简历介绍,多图片的分享,广告详细内容,商品介绍,以及项目或系统的介绍等.这个插件提供了基本的界面样式和滑动式菜单,非常简洁友好,已实际使用过,现分享出来,希望更多人喜欢. SMINT是一个为一页式网站爱好者做的简单jQuery插件,目前最新为3.0版本.      官方网站地址:

推荐60个jQuery插件(转)

jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现Javascript自定义动态调整网页文字大小 jQuery插件Magnify放大镜实现javascript图片放大功能 jQuery插件tooltip提示条实现Javascript动态文字或图片提示效果 jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果

JQuery插件之Animate.css和 jquery-aniview

Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些

Jquery 插件学习笔记

Jquery 插件 1表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

盘点十个超炫的jQuery插件

“DevExpress 14.2新版发布会”即将推出.心动不如行动,赶快报名吧!我们期待与您相约. 今天小编为大家搜罗了十个超酷的jQuery插件,这可以使你的网站界面更加友好.jQuery创造了令人难以置信的Web应用程序,而这些插件则将简化开发者的开发过程.来一起看看里面有没有你喜欢的插件呢?希望能对大家的开发起到帮助!让我们一起来看看吧! ScrollNav ScrollNav是一个比较小的jQuery插件,它能抓住页面的现有内容并将其划分成逻辑部分,同时来建立一个可定制的滚动导航栏.是一