jQuery插件slider实现拖动滑块选取价格范围


Posted in Javascript onApril 30, 2015

在一些产品报价网站上,需要给出一系列价格范围供用户筛选,我们在筛选的范围之外再加一个自定义价格范围,这样为用户多提供了一种选择方式。本文将使用jQuery插件结合CSS实现使用滑块滑动的方式选择价格范围,请看本文讲解。

jQuery插件slider实现拖动滑块选取价格范围

jQuery ui 有个slider插件,就是一个非常好使的拖动滑块插件。要想实现滑块拖动,需要在页面head间先载入如下js。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>

当然,如果考虑项目运行效率,你可以将上述几个js压缩成一个js,我们在大型WEB应用项目中就要考虑这些。
你可以到jquery ui 官网下载这些相关js,
接着,我们构建主要html代码:

<ul class="price_list"> 
  <li class="title">价格范围:</li> 
  <li><a href="#">3000元以下</a></li> 
  <li><a href="#">3000-4000元</a></li> 
  <li><a href="#">4000-5000元</a></li> 
  <li><a href="#">5000-6000元</a></li> 
  <li><a href="#">6000-7000元</a></li> 
  <li><a href="#">7000-8000元</a></li> 
  <li><a href="#">8000-9000元</a></li> 
  <li><a href="#">9000-10000元</a></li> 
  <li><a href="#">10000元以上</a></li> 
  <li id="custom"><a href="javascript:;" id="show">自定义</a> 
    <div id="slider_wrap"> 
     <div id="slider"> 
       <div id="range"></div> 
     </div> 
     <p><input type="text" class="input" id="start" value="0" /> - 
     <input type="text" class="input" id="end" value="3000" /> 
     <input type="button" class="btn" id="btn_ok" value="确 定" /></p> 
    </div> 
  </li> 
</ul>

价格范围由一系列li组成,其中最后一个li,我们给它一个设置id为custom,并且在其中包含需要展示滑块选择的div#slider_wrap,当然默认情况下该div是隐藏的。我们需要用CSS来实现外观效果。

CSS

通过CSS,使页面有一个好看的外观:

.price_list{list-style:none} 
.price_list li{float:left; line-height:22px; margin-right:10px; padding:2px 6px} 
.price_list li.title{display:block; width:60px; height:60px;} 
#custom{border:1px solid #d3d3d3; padding:0 16px 0 2px; background:url(images/icon.gif) 
 no-repeat right 8px; position:relative;} 
.custom_show{background:url(images/icon.gif) no-repeat right 18px;} 
#show{width:100%; height:26px} 
.input{width:66px; height:20px; line-height:20px; border:1px solid #d3d3d3} 
.btn{width:54px; height:24px; line-height:24px; background:url(images/btn_bg.gif) 
repeat-x; border:1px solid #d3d3d3; cursor:pointer} 
#slider_wrap{width:250px; height:80px; padding:10px; position:absolute; left:-1px; 
top:22px; border:1px solid #d3d3d3; background:#fff; display:none; z-index:1001} 
#slider{width:230px; height:40px; margin:5px auto; border:none; background: 
url(images/line_bg.gif) no-repeat} 
#range{width:220px; margin-left:4px} 
#slider_wrap p{width:230px; margin:4px auto}

关键是弹出下拉的div用来展示滑动选择范围的CSS,通过绝对与相对定位来确定展示层的位置。
展示层中的滑块插件的CSS来源于jquery ui的自带的CSS,我做了一些小的修改。

.ui-slider {position:relative; text-align:left;} 
.ui-slider .ui-slider-handle {position:absolute; z-index:2; width:11px; height:14px; 
cursor: default; background:url(images/arr.gif) no-repeat } 
.ui-slider .ui-slider-range {position:absolute; z-index:1; display:block; border:0; 
background:#f90} 
.ui-slider-horizontal {height:10px; } 
.ui-slider-horizontal .ui-slider-handle {top:14px; margin-left:0; } 
.ui-slider-horizontal .ui-slider-range {top:20px; height:4px; } 
.ui-slider-horizontal .ui-slider-range-min {left:0; } 
.ui-slider-horizontal .ui-slider-range-max {right:0; }

jQuery

首先,我们需要在点击“自定义”时,下拉弹出滑块范围显示的层。当点击“自定义”时,显示下拉层,并且改变箭头样式,再次点击时,则隐藏下拉层。

$(function(){ 
  $("#show").click(function(){ 
    if($("#slider_wrap").css("display")=="none"){ 
      $("#slider_wrap").show(); 
      $("#custom").css("background-position","right -18px"); 
    }else{ 
      $("#slider_wrap").hide(); 
      $("#custom").css("background-position","right 8px"); 
    } 
  }); 
});

有同学可能会想为什么不直接用toggle方法来代替click,我试过了,行的通,但是后面我们还要在下拉的层中单击“确定”,隐藏下拉层。如果使用toggle方法,则当单击了“确定”按钮之后需要点两下才能弹出下拉层,所以我选择了click方法加判断来解决这个问题。
接着调用slider插件:

$("#range").slider({ 
  min: 0, 
  max: 10000, 
  step: 500, 
  values: [0, 3000], 
  slide: function(event, ui){ 
    $("#start").val(ui.values[0]); 
    $("#end").val(ui.values[1]); 
  } 
});

我们设置了滑块的最大值max为10000,最小值min为0,滑块每次滑动的距离step是500,默认初始范围values为0到3000。当滑动滑块的时候,赋值给#start和#end两个文本框。更多参数设置和方法调用请查看jquery ui 官方网站:
最后,当我们选定好价格范围后,点击“确定”按钮,将关闭滑块选择框,改变“自定义”状态,代码如下:

$("#btn_ok").click(function(){ 
  $("#slider_wrap").hide(); 
  $("#custom").css("background-position","right 8px"); 
  var start = $("#start").val(); 
  var end = $("#end").val(); 
  $("#show").html(start+"-"+end); 
});

这样,我们就可以看到我们想要的效果了,快去动手试试吧。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS Timing
Apr 21 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
基于jquery实现图片放大功能
May 07 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
javascript实现验证身份证号的有效性并提示
Apr 30 #Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 #Javascript
jquery实现键盘左右翻页特效
Apr 30 #Javascript
jquery Validation表单验证使用详解
Sep 12 #Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 #Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 #Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
一周学会PHP(视频)Http下载
2006/12/12 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
软件测试面试题
2015/10/21 面试题
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
实习介绍信范文
2015/05/05 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Python&Matlab实现樱花的绘制
2022/04/07 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript