• 王东峰主持召开河北雄安新区规划建设工作领导小组会议 2019-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18
  • 欢迎访问

    云南快乐十分走势图:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    jQuery+CSS使用滑块选取价格范围

    来源:云南11选五走势图500期     2013年07月02日17:02
    字号:T|T

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

    查看演示DEMO 下载源码

    XHTML

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

    
    

    当然,如果考虑项目运行效率,你可以将上述几个js压缩成一个js,我们在大型WEB应用项目中就要考虑这些。

    你可以到jquery ui 官网下载这些相关js,//www.jqueryui.com

    接着,我们构建主要html代码:

    
    

    价格范围由一系列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 官方网站://jqueryui.com/demos/slider/

    最后,当我们选定好价格范围后,点击“确定”按钮,将关闭滑块选择框,改变“自定义”状态,代码如下:

    $("#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);
    });

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

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • 王东峰主持召开河北雄安新区规划建设工作领导小组会议 2019-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18