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

jQuery用户界面有个滑块插件，就是一个非常好使的拖动滑块插件。要想实现滑块拖动，需要在页面头间先载入如下js。

脚本类型=' text/JavaScript ' src=' http : js/jquery。js /脚本脚本类型=' text/JAVAScript ' src=' http : js/ui/jquery。ui。核心。js /脚本类型=' text/JAVAScript ' src=' http : js/ui/jquery。ui。小部件。js /脚本类型=' text/JAVAScript ' src=' http 3360 js/ui。小部件。js /脚本类型=' text/JavaScript '当然，如果考虑项目运行效率，你可以将上述几个射流研究…压缩成一个js，我们在大型网应用项目中就要考虑这些。你可以到jquery用户界面官网下载这些相关js，接着，我们构建主要超文本标记语言代码：

ul class=' price _ list ' Li class=' title '价格范围：/li lia href='#'3000元以下/a/li lia href='#'3000-4000元/a/li lia href='#'4000-5000元/a/li lia href='#'5000-6000元/a/li lia href='#'6000-7000元/a/li lia href='#'7000-8000元/a/li lia href='#'8000-9000元/a/li lia href='#'9000-10000元/a/li lia 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 pinput 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价格范围由一系列里组成，其中最后一个李，我们给它一个设置编号为习俗，并且在其中包含需要展示滑块选择的div #滑块_环绕，当然默认情况下该差异是隐藏的。我们需要用半铸钢钢性铸铁(铸造半钢)来实现外观效果。

半铸钢钢性铸铁(铸造半钢)

通过CSS，使页面有一个好看的外观：价格列表{列表式：无} .价目表li { float:left线高：22 px右边距：10 pxpadding:2px 6px } .价目表李。标题{显示：块；宽度：60 px高度：60 px} #自定义{border:1px实心# d3d 3d padd :0 16px 0 2px background : URL(图像/图标。gif)不重复右8px位置：相对；} .custom _ show { background : URL(图像/图标。gif)不重复右18px} # show { width :100%；高度：26px} .输入{宽度：66像素高度：20 px线高：20 pxborder:1px实心#d3d3d3} .BTN { width :54 pxh8 :24 px线高：24 px背景：网址(图片/BTN _ BG。gif)重复-x；border:1px固体# d3d3d3cursor :指针} # slider _ wrap { width :250 px高度：80 pxpadding:10px位置：绝对；左侧：-1px；top:22pxborder:1px固体# d3d3d3背景# fffdisplay : nonez-index :1001 } # slider { width :230 px；高度：40 pxmargin:5px汽车；border : none background : URL(images/line _ BG。gif)无重复} #范围{ width :220 px左边距-:4 px } # slider _ wrap p { width :230 px；margin:4px auto}关键是弹出下拉的差异用来展示滑动选择范围的CSS，通过绝对与相对定位来确定展示层的位置。展示层中的滑块插件的半铸钢钢性铸铁(铸造半钢)来源于jquery用户界面的自带的CSS，我做了一些小的修改。ui-slider { position : relative；text-align : left；} .用户界面滑块。ui-slider-handle { position : absolute；z索引：2；宽度：11 px；height:14pxcursor:默认值；background : URL(images/arr . gif)no-repeat }。用户界面滑块。ui-slider-range { position : absolute；z索引：1；显示：块；border:0background:#f90}。ui-slider-水平{ height:10px} .ui-滑块-水平。ui-slider-handle { top :14 px；左边距：0；} .ui-滑块-水平。ui-slider-range { top :20 px；height:4px} .ui-滑块-水平。ui-slider-range-min { left :0；} .ui-滑块-水平。ui-slider-range-max { right :0；} jQuery

首先，我们需要在点击“自定义”时，下拉弹出滑块范围内显示的图层。单击“自定义”时，将显示下拉层，箭头样式也将改变。再次单击时，下拉层将被隐藏。

$(function(){ $('#show '))。单击(function(){ if($('#slider_wrap ')。CSS(' display ')==' none '){ $(' # slider _ wrap ')。show()；$('#custom ')。css('背景-位置'，'右侧-18px ')；}else{ $('#slider_wrap ')。hide()；$('#custom ')。css('背景-位置'，'右8px ')；} });});有些学生可能想知道为什么我们不用切换而不用点击。我试过了，但是我们必须在下拉层中单击确定来隐藏下拉层。如果使用切换方式，点击确定按钮后需要点击两次弹出下拉图层，所以我选择了点击方式加判断来解决这个问题。然后调用滑块插件：

$('#range ')。滑块({ min: 0，max: 10000，step: 500，values: [0，3000]，slide:函数(事件，ui){ $('#start ')。val(ui . values[0])；$('#end ')。val(ui . values[1])；} });我们将滑块的最大值max设置为10000，最小值min设置为0，滑块的滑动距离步长设置为500，默认的初始范围值设置为0到3000。滑动滑块时，为#start和#end文本框赋值。更多参数设置和方法调用，请查看jquery ui官网：最后，我们选定价格区间后，点击“确定”按钮，关闭滑块选择框，更改“自定义”状态。代码如下：

$('#btn_ok ')。单击(function(){ $('#slider_wrap '))。hide()；$('#custom ')。css('背景-位置'，'右8px ')；var start=$('#start ')。val()；var end=$('#end ')。val()；$('#show ')。html(开始'-'结束)；});这样，我们就能看到我们想要的效果。去试试吧。

以上就是本文的全部内容，希望大家喜欢。