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 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
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
php购物网站支付paypal使用方法
2010/11/28 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
js实现点击切换TAB标签实例
2015/08/21 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python常用库推荐
2016/12/04 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
工作失职检讨书范文
2014/01/16 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年底工作总结范文
2015/05/15 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang