Der jQuery-Plug-in-Slider implementiert den Drag-Slider zur Auswahl der Preisspanne_jquery

Auf einigen Produktangebots-Websites müssen Benutzer eine Reihe von Preisspannen zum Filtern angeben. Wir fügen zusätzlich zum gefilterten Bereich eine benutzerdefinierte Preisspanne hinzu, die den Benutzern eine weitere Auswahl bietet. In diesem Artikel wird das jQuery-Plug-in in Kombination mit CSS verwendet, um die Preisspanne mithilfe eines Schiebereglers auszuwählen. Bitte lesen Sie diesen Artikel zur Erläuterung.

jQuery UI verfügt über ein Slider-Plug-In, ein sehr nützliches Drag-Slider-Plug-In. Um das Ziehen des Schiebereglers zu implementieren, müssen Sie die folgenden js in den Seitenkopf laden.

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

Wenn Sie die Effizienz des Projektbetriebs berücksichtigen, können Sie die oben genannten mehreren Js natürlich zu einem Js komprimieren. Wir müssen diese in großen WEB-Anwendungsprojekten berücksichtigen.
Sie können diese zugehörigen JS von der offiziellen Website von jquery ui herunterladen,
Als nächstes erstellen wir den Haupt-HTML-Code:

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

Die Preisspanne besteht aus einer Reihe von Lis. Für das letzte Li geben wir ihm eine benutzerdefinierte ID und enthalten das Div #slider_wrap, das die Slider-Auswahl anzeigen muss. Natürlich ist dieses Div standardmäßig ausgeblendet . Wir müssen CSS verwenden, um den Erscheinungsbildeffekt zu erzielen.

CSS

Geben Sie der Seite durch CSS ein schönes Aussehen:

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

Der Schlüssel besteht darin, das Dropdown-Div aufzurufen, um das CSS des gleitenden Auswahlbereichs anzuzeigen und die Position der Anzeigeebene durch absolute und relative Positionierung zu bestimmen.
Das CSS des Slider-Plug-Ins in der Anzeigeebene stammt von dem CSS, das mit jquery ui geliefert wird, und ich habe einige kleinere Änderungen vorgenommen.

.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

Zuerst müssen wir die im Schiebereglerbereich angezeigte Ebene nach unten ziehen, wenn wir auf „Anpassen“ klicken. Wenn Sie auf „Anpassen“ klicken, wird die Dropdown-Ebene angezeigt und der Pfeilstil geändert. Wenn Sie erneut klicken, wird die Dropdown-Ebene ausgeblendet.

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

Einige Schüler fragen sich vielleicht, warum sie nicht einfach die Umschaltmethode anstelle des Klickens verwenden. Ich habe es versucht und es hat funktioniert, aber später müssen wir in der Dropdown-Ebene auf „OK“ klicken, um die Dropdown-Ebene auszublenden. Wenn Sie die Umschaltmethode verwenden, müssen Sie zweimal klicken, um die Dropdown-Ebene aufzurufen, nachdem Sie auf die Schaltfläche „OK“ geklickt haben. Daher habe ich die Klickmethode plus Urteilsvermögen gewählt, um dieses Problem zu lösen.
Rufen Sie dann das Slider-Plugin auf:

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

Wir setzen den maximalen Wert des Schiebereglers auf 10000, den minimalen Wert auf 0, den Abstandsschritt für jede Folie des Schiebereglers auf 500 und die standardmäßigen Anfangsbereichswerte auf 0 bis 3000. Weisen Sie beim Schieben des Schiebereglers den beiden Textfeldern #start und #end Werte zu. Weitere Parametereinstellungen und Methodenaufrufe finden Sie auf der offiziellen Website von jquery ui:
Nachdem wir die Preisspanne ausgewählt haben, klicken Sie auf die Schaltfläche „OK“, um das Auswahlfeld des Schiebereglers zu schließen und den Status „Benutzerdefiniert“ zu ändern. Der Code lautet wie folgt:

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

Auf diese Weise können wir den gewünschten Effekt sehen. Probieren wir es einfach aus.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.