Heim >Web-Frontend >js-Tutorial >Ziehen Sie basierend auf jquery die Maus nach links und rechts, um den Schieberegler mit dem Quellcode download_jquery zu verschieben

Ziehen Sie basierend auf jquery die Maus nach links und rechts, um den Schieberegler mit dem Quellcode download_jquery zu verschieben

WBOY
WBOYOriginal
2016-05-16 15:23:551709Durchsuche

Bevor Sie den Haupttext eingeben, lassen Sie mich eine Darstellung posten, um zu sehen, ob es der gewünschte Effekt ist:

Online-Demo Quellcode-Download

Basierend auf dem Einstellungscode für das Ziehen des mobilen jQuery-Schiebereglers. Dies ist ein Spezialeffekt, der Mobiltelefone unterstützt. Sie können die Bereichsauswahl des Schiebereglers und die Werteauswahl des Schiebereglers ziehen.

Kein Unsinn mehr, lassen Sie mich einfach den Code für Sie posten.

HTML-Code:

<div class="demo">
    <input type="hidden" class="single-slider" value="0" />
    <!-- <button id="g1">获取值</button> -->
  </div>
  <div class="demo">
    <input class="range-slider" type="hidden" value="10,89" />
    <!-- <button id="g2">获取值</button> -->
  </div> 

JS-Code:

$(function () {
     $('.single-slider').jRange({
       from: 0,
       to: 100,
       step: 1,
       scale: [0, 25, 50, 75, 100],
       format: '%s',
       width: 300,
       showLabels: true,
       showScale: true
     });
     $('.range-slider').jRange({
       from: 0,
       to: 100,
       step: 1,
       scale: [0, 25, 50, 75, 100],
       format: '%s',
       width: 300,
       showLabels: true,
       isRange: true
     });
     $("#g1").click(function () {
       var aa = $(".single-slider").val();
       alert(aa);
     });
     $("#g2").click(function () {
       var aa = $(".range-slider").val();
       alert(aa);
     });
   });

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn