<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
        當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

        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插
        推薦度:
        導(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

        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插
        推薦度:
        標(biāo)簽: 插件 jQuery slider
        • 熱門(mén)焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門(mén)推薦

        專題
        Top
        主站蜘蛛池模板: 亚州**色毛片免费观看| 亚洲av无码一区二区三区天堂古代| 亚洲av日韩av永久在线观看| 在线观看免费人成视频色| 免费久久人人爽人人爽av| 亚洲一级特黄大片无码毛片 | 亚洲乱人伦中文字幕无码| 毛色毛片免费观看| 亚洲国产精品嫩草影院| avtt亚洲天堂| 亚洲一区在线观看视频| 最新仑乱免费视频| 无码一区二区三区亚洲人妻| 99视频有精品视频免费观看| 久久综合亚洲色一区二区三区| 啦啦啦完整版免费视频在线观看 | 亚洲精品在线观看视频| ww在线观视频免费观看| 亚洲精品无码久久久久YW| 亚洲福利在线播放| 免费无码一区二区三区| 亚洲黄色激情视频| 亚洲色图综合在线| 免费国产黄网站在线观看可以下载| 亚洲国产av一区二区三区丶| 永久黄网站色视频免费观看| 成人福利在线观看免费视频| 亚洲男人的天堂在线播放| 成人免费毛片观看| 中文字幕久精品免费视频| 亚洲视频精品在线观看| 国产乱子伦精品免费无码专区| 中文字幕 亚洲 有码 在线| 又色又污又黄无遮挡的免费视| 久久er国产精品免费观看8| 亚洲欧洲国产综合| 免费一级毛片正在播放| 100部毛片免费全部播放完整| 精品亚洲成a人在线观看| 久久精品亚洲日本佐佐木明希| 国产在线观看免费观看不卡|