jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:37:43

jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery

jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery:在一些產(chǎn)品報(bào)價(jià)網(wǎng)站上，需要給出一系列價(jià)格范圍供用戶篩選，我們?cè)诤Y選的范圍之外再加一個(gè)自定義價(jià)格范圍，這樣為用戶多提供了一種選擇方式。本文將使用jQuery插件結(jié)合CSS實(shí)現(xiàn)使用滑塊滑動(dòng)的方式選擇價(jià)格范圍，請(qǐng)看本文講解。 jQuery ui 有個(gè)slider插

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery:在一些產(chǎn)品報(bào)價(jià)網(wǎng)站上，需要給出一系列價(jià)格范圍供用戶篩選，我們?cè)诤Y選的范圍之外再加一個(gè)自定義價(jià)格范圍，這樣為用戶多提供了一種選擇方式。本文將使用jQuery插件結(jié)合CSS實(shí)現(xiàn)使用滑塊滑動(dòng)的方式選擇價(jià)格范圍，請(qǐng)看本文講解。 jQuery ui 有個(gè)slider插

在一些產(chǎn)品報(bào)價(jià)網(wǎng)站上，需要給出一系列價(jià)格范圍供用戶篩選，我們?cè)诤Y選的范圍之外再加一個(gè)自定義價(jià)格范圍，這樣為用戶多提供了一種選擇方式。本文將使用jQuery插件結(jié)合CSS實(shí)現(xiàn)使用滑塊滑動(dòng)的方式選擇價(jià)格范圍，請(qǐng)看本文講解。

jQuery ui 有個(gè)slider插件，就是一個(gè)非常好使的拖動(dòng)滑塊插件。要想實(shí)現(xiàn)滑塊拖動(dòng)，需要在頁(yè)面head間先載入如下js。

價(jià)格范圍由一系列l(wèi)i組成，其中最后一個(gè)li，我們給它一個(gè)設(shè)置id為custom，并且在其中包含需要展示滑塊選擇的div#slider_wrap，當(dāng)然默認(rèn)情況下該div是隱藏的。我們需要用CSS來(lái)實(shí)現(xiàn)外觀效果。

CSS

通過(guò)CSS，使頁(yè)面有一個(gè)好看的外觀：

.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}

關(guān)鍵是彈出下拉的div用來(lái)展示滑動(dòng)選擇范圍的CSS，通過(guò)絕對(duì)與相對(duì)定位來(lái)確定展示層的位置。
展示層中的滑塊插件的CSS來(lái)源于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

首先，我們需要在點(diǎn)擊“自定義”時(shí)，下拉彈出滑塊范圍顯示的層。當(dāng)點(diǎn)擊“自定義”時(shí)，顯示下拉層，并且改變箭頭樣式，再次點(diǎn)擊時(shí)，則隱藏下拉層。

有同學(xué)可能會(huì)想為什么不直接用toggle方法來(lái)代替click，我試過(guò)了，行的通，但是后面我們還要在下拉的層中單擊“確定”，隱藏下拉層。如果使用toggle方法，則當(dāng)單擊了“確定”按鈕之后需要點(diǎn)兩下才能彈出下拉層，所以我選擇了click方法加判斷來(lái)解決這個(gè)問(wèn)題。
接著調(diào)用slider插件：

我們?cè)O(shè)置了滑塊的最大值max為10000，最小值min為0，滑塊每次滑動(dòng)的距離step是500，默認(rèn)初始范圍values為0到3000。當(dāng)滑動(dòng)滑塊的時(shí)候，賦值給#start和#end兩個(gè)文本框。更多參數(shù)設(shè)置和方法調(diào)用請(qǐng)查看jquery ui 官方網(wǎng)站：
最后，當(dāng)我們選定好價(jià)格范圍后，點(diǎn)擊“確定”按鈕，將關(guān)閉滑塊選擇框，改變“自定義”狀態(tài)，代碼如下：

這樣，我們就可以看到我們想要的效果了，快去動(dòng)手試試吧。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：插件 jQuery slider

熱門(mén)焦點(diǎn)

jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery

jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery

jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍_jquery

最新推薦

猜你喜歡

熱門(mén)推薦