Le curseur du plug-in jQuery implémente le déplacement du curseur pour sélectionner la fourchette de prix_jquery

Sur certains sites Web de devis de produits, une série de fourchettes de prix doivent être indiquées pour que les utilisateurs puissent filtrer. Nous ajoutons une fourchette de prix personnalisée en plus de la fourchette filtrée, ce qui offre aux utilisateurs un choix supplémentaire. Cet article utilisera le plug-in jQuery combiné avec CSS pour sélectionner la fourchette de prix à l'aide d'un curseur. Veuillez lire cet article pour obtenir des explications.

jQuery ui dispose d'un plug-in de curseur, qui est un plug-in de curseur de déplacement très utile. Pour implémenter le glissement du curseur, vous devez charger les js suivants dans l'en-tête de la page.

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

Bien sûr, si vous considérez l'efficacité du fonctionnement du projet, vous pouvez compresser les plusieurs js ci-dessus en un seul js. Nous devons les prendre en compte dans les projets d'application WEB à grande échelle.
Vous pouvez télécharger ces js associés à partir du site officiel de jquery ui,
Ensuite, nous construisons le code html principal :

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

La fourchette de prix se compose d'une série de li. Pour le dernier li, nous lui donnons un identifiant personnalisé et contenons le div #slider_wrap qui doit afficher la sélection du curseur. Bien sûr, ce div est masqué par défaut. . Nous devons utiliser CSS pour obtenir l'effet d'apparence.

CSS

Donner à la page une belle apparence grâce au 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} 

La clé est de faire apparaître le div déroulant pour afficher le CSS de la plage de sélection coulissante et de déterminer la position du calque d'affichage via un positionnement absolu et relatif.
Le CSS du plug-in slider dans la couche d'affichage provient du CSS fourni avec jquery ui, et j'ai apporté quelques modifications mineures.

.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

Tout d'abord, nous devons dérouler le calque affiché dans la plage du curseur lorsque nous cliquons sur "Personnaliser". Lorsque vous cliquez sur "Personnaliser", le calque déroulant est affiché et le style de la flèche est modifié. Lorsque vous cliquez à nouveau, le calque déroulant est masqué.

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

Certains étudiants peuvent se demander pourquoi ne pas simplement utiliser la méthode bascule au lieu de cliquer. Je l'ai essayé et cela a fonctionné, mais plus tard, nous devons cliquer sur "OK" dans le calque déroulant pour masquer le calque déroulant. Si vous utilisez la méthode bascule, vous devez cliquer deux fois pour faire apparaître le calque déroulant après avoir cliqué sur le bouton "OK", j'ai donc choisi la méthode clic plus jugement pour résoudre ce problème.
Appelez ensuite le plug-in slider :

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

Nous définissons la valeur maximale du curseur max à 10 000, la valeur minimale min à 0, le pas de distance pour chaque diapositive du curseur est de 500 et les valeurs de plage initiales par défaut sont de 0 à 3 000. Lorsque vous faites glisser le curseur, attribuez des valeurs aux deux zones de texte #start et #end. Pour plus de paramètres et d'appels de méthodes, veuillez consulter le site officiel de jquery ui :
Enfin, après avoir sélectionné la fourchette de prix, cliquez sur le bouton « OK » pour fermer la boîte de sélection du curseur et modifier l'état « Personnalisé ». Le code est le suivant :
.

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

De cette façon, nous pouvons voir l’effet que nous voulons, allons l’essayer.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.