Peluncur pemalam jQuery melaksanakan penggelongsor menyeret untuk memilih julat harga

Peluncur pemalam jQuery melaksanakan penggelongsor menyeret untuk memilih julat harga_jquery

WBOY

Lepaskan： 2016-05-16 16:01:37

asal

1343 orang telah melayarinya

Di sesetengah tapak web sebut harga produk, satu siri julat harga perlu diberikan untuk ditapis oleh pengguna Kami menambah julat harga tersuai sebagai tambahan kepada julat yang ditapis, yang memberikan pengguna satu lagi pilihan. Artikel ini akan menggunakan pemalam jQuery digabungkan dengan CSS untuk memilih julat harga menggunakan peluncur Sila baca artikel ini untuk penjelasan.

jQuery ui mempunyai pemalam gelangsar, yang merupakan pemalam gelangsar seret yang sangat berguna. Untuk melaksanakan penyeretan gelangsar, anda perlu memuatkan js berikut dalam kepala halaman.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>

Salin selepas log masuk

Sudah tentu, jika anda mempertimbangkan kecekapan operasi projek, anda boleh memampatkan beberapa js di atas menjadi satu js Kami mesti mempertimbangkan ini dalam projek aplikasi WEB berskala besar.
Anda boleh memuat turun js berkaitan ini dari laman web rasmi jquery ui,
Seterusnya, kami membina kod html utama:

<ul class="price_list"> 
  <li class="title">价格范围：</li> 
  <li><a href="#">3000元以下</a></li> 
  <li><a href="#">3000-4000元</a></li> 
  <li><a href="#">4000-5000元</a></li> 
  <li><a href="#">5000-6000元</a></li> 
  <li><a href="#">6000-7000元</a></li> 
  <li><a href="#">7000-8000元</a></li> 
  <li><a href="#">8000-9000元</a></li> 
  <li><a href="#">9000-10000元</a></li> 
  <li><a 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> 
     <p><input 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>

Salin selepas log masuk

Julat harga terdiri daripada satu siri li Untuk li terakhir, kami memberikannya satu set id tersuai, dan mengandungi div #slider_wrap yang perlu memaparkan pemilihan peluncur Sudah tentu, div ini disembunyikan secara lalai . Kita perlu menggunakan CSS untuk mencapai kesan penampilan.

CSS

Beri halaman penampilan yang menarik melalui 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}

Salin selepas log masuk

Kuncinya ialah untuk memunculkan div lungsur untuk memaparkan CSS julat pemilihan gelongsor dan menentukan kedudukan lapisan paparan melalui kedudukan mutlak dan relatif.
CSS pemalam peluncur dalam lapisan paparan berasal daripada CSS yang disertakan dengan jquery ui, dan saya membuat beberapa pengubahsuaian kecil.

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

Salin selepas log masuk

jQuery

Pertama sekali, kita perlu menurunkan lapisan yang dipaparkan dalam julat peluncur apabila mengklik "Sesuaikan". Apabila "Sesuaikan" diklik, lapisan lungsur turun dipaparkan dan gaya anak panah ditukar Apabila diklik sekali lagi, lapisan lungsur turun disembunyikan.

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

Salin selepas log masuk

Sesetengah pelajar mungkin tertanya-tanya mengapa tidak hanya menggunakan kaedah togol dan bukannya klik saya mencubanya dan ia berjaya, tetapi kemudian kita perlu mengklik "OK" dalam lapisan lungsur untuk menyembunyikan lapisan lungsur. Jika anda menggunakan kaedah togol, anda perlu mengklik dua kali untuk muncul lapisan lungsur selepas mengklik butang "OK", jadi saya memilih kaedah klik ditambah pertimbangan untuk menyelesaikan masalah ini.
Kemudian panggil pemalam peluncur:

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

Salin selepas log masuk

Kami menetapkan nilai maksimum penggelongsor maksimum kepada 10000, nilai minimum min hingga 0, langkah jarak untuk setiap slaid peluncur ialah 500 dan nilai julat awal lalai ialah 0 hingga 3000. Apabila meluncurkan peluncur, tetapkan nilai pada dua kotak teks #mula dan #akhir. Untuk lebih banyak tetapan parameter dan panggilan kaedah, sila semak tapak web rasmi jquery ui:
Akhir sekali, selepas kami memilih julat harga, klik butang "OK" untuk menutup kotak pilihan gelangsar dan menukar keadaan "Tersuai" Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Dengan cara ini, kita dapat melihat kesan yang kita inginkan, mari kita cuba.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.