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 锁定弹出层实现代码
Feb 23 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
详解VUE 数组更新
Dec 16 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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作的文本留言本的例子(三)
2006/10/09 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
js中function()使用方法
2013/12/24 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python实现一个简单的ping工具方法
2019/01/31 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
军训自我鉴定
2013/12/14 职场文书
有创意的广告词
2014/03/18 职场文书
项目采购员岗位职责
2014/04/15 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python