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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php中adodbzip类实例
2014/12/08 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
利用python实现逐步回归
2020/02/24 Python
Python如何将函数值赋给变量
2020/04/28 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
领导干部作风建设总结
2014/10/23 职场文书
红色影片观后感
2015/06/18 职场文书
总经理致辞
2015/07/29 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书