<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
        主站蜘蛛池模板: 久久精品国产这里是免费| 四虎成人精品国产永久免费无码| a级毛片在线免费看| 亚洲另类少妇17p| jizz18免费视频| 亚洲热妇无码AV在线播放| 国产做国产爱免费视频| 亚洲AV无码第一区二区三区| a级毛片免费全部播放无码| 亚洲中文字幕无码一久久区| 日韩免费的视频在线观看香蕉| 亚洲成A人片777777| 最近免费中文字幕mv电影| 亚洲一区二区三区国产精品无码| 免费a级毛片高清视频不卡 | 久久精品国产精品亚洲色婷婷| a级日本高清免费看| 亚洲精品在线免费观看视频| 在线观看免费人成视频色| 亚洲av最新在线观看网址| 亚洲无线一二三四区手机| a级黄色毛片免费播放视频| 亚洲精品中文字幕麻豆| 毛片网站免费在线观看| 免费看内射乌克兰女| 日本亚洲欧洲免费天堂午夜看片女人员 | 131美女爱做免费毛片| 亚洲另类精品xxxx人妖| 国产精品久免费的黄网站 | 亚洲国产成人久久综合碰碰动漫3d| 免费无遮挡无码永久视频| 亚洲娇小性xxxx色| 亚洲Aⅴ无码一区二区二三区软件| 两个人看的www高清免费视频| 99亚洲精品高清一二区| 国产一级理论免费版| 永久免费av无码入口国语片| 亚洲人成色777777精品| 人人狠狠综合久久亚洲婷婷 | 亚洲人成电影网站国产精品| 久久精品免费一区二区|