jQuery Slider funktioniert nicht auf dem Handy wie geplant

Question

UPDATE 7/24/15: Da ich den Code nicht migrieren konnte und Probleme hatte, änderte ich die Bibliothek total. Die schnellste Lösung für mich war http://refreshless.com/nouislider/. Es erlaubte mir immer noch, Werte mit der gleichen Abkürzung wie die jQuery zu erhalten. Ich kann nicht dafür bürgen, wie leicht das ist, aber für eine temporäre Reparatur auf einer Kundenseite, die ich empfehlen kann.

UPDATE 7/30/15: jQuery UI wurde bereits versucht und Touch Punch, sie beide verursacht weiteres Problem. Wieder war die einzige Lösung für mich in diesem Fall No UI Slider. Ihr Projekt könnte anders sein, aber für schwerwiegende jQuery-Skriptkonflikte auf über 4 Jahre alten Frameworks war dies meine Lösung.

Der folgende Code (Beispiel unter: http://www.equant-design.com/aab/shop/category/new-in-whats-new/89) gibt mir ein ziemliches Nachdenken, da ich einem Kunden dabei behilflich bin, seine Site in den Responsive Mode zu konvertieren. Der Schieberegler funktioniert wie codiert, aber auf mobilen Geräten funktionieren die Bereiche nur, indem Sie auf die Skalenschiene und nicht auf die Buchstützen klicken, um den Bereich zu definieren. Ich wollte gerade den Code rausreißen, aber ich wollte sehen, ob jemand von einer schnellen Lösung für dieses Problem wusste.

jQuery-Version: 1.4.2

<script type="text/javascript"> 
    $('#price-range-filter-header').click(function() { 
     FilterContainerSlideUpDown('filter_but', 'price-range-filter-header'); 
     }); 
    $(function() { 
     $("#slider-range").slider({ 
      range: true, 
      min: 0, 
      max: 300, 
      values: [0, 300], 
      step: 5, 
      slide: function(event, ui) 
      { 
       $("#slider-range-caption").html('<?=$currency_type->symbol?>' + ui.values[0] + ' - ' + '<?=$currency_type->symbol?>' + ui.values[1]); 
      }, 
      change: function(event,ui) 
      { 
       ApplyPriceRangeFilter(ui.values[0],ui.values[1]); 
      } 

     }); 

     $("#slider-range-caption").html('<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 0) + ' - ' + '<?=$currency_type->symbol?>' + $("#slider-range").slider("values", 1)); 

     //initialise jquery scrollbar 
     $('.scrollbar').scrollbar(); 
    }); 
</script> 

<div id="filter_but" name="filter_but"> 
    <div id="slider-range"></div> 
</div> 

Answer 1

Ich hatte die gleichen Probleme, entlang einer Vielzahl von mobilen Web-App. Schließlich, satt mit Touch-Management, externe js, JQuery und so viertens, habe ich http://refreshless.com/nouislider/. (Seien Sie sicher, dass ich Loots von solchen Apps, online oder Phonegap von v1.4, von 2012 gemacht habe).

Perfekt, einfach, übersichtlich und daher leicht anpassbar.

Meine Antwort: NoUiSlider. Def.

OMG nicht taucht in kniffligen dev ... macht es einfach

Answer 2

Es sieht für mich wie es Probleme mit der Seite sind und Scrollen. Wenn ich Sie wäre, würde ich das Ziehen der Seite deaktivieren (während Sie immer noch das Scrollen erlauben), so dass, wenn Benutzer den Schieberegler schieben, sie die Seite nicht ziehen. Das folgende Stück Code erfordert, dass Sie jQuery Mobile zu verwenden:

$(document).delegate('.ui-page', 'touchmove', false); 

Alternativ Sie mit einem Front-End Framework wie Foundation oder Bootstrap gehen könnten und man kann ihre Werkzeuge nutzen, um Dinge sicherzustellen, an der richtigen Stelle zu bleiben und sind wirklich mobil freundlich.

Answer 3

Damit jQuery UI-Widgets auf mobilen Geräten funktionieren, müssen Sie die Unterstützung für Touch-Ereignisse integrieren.

Dies wird bereits in diesem Projekt durchgeführt worden: jQuery UI Touch Punch

Sie müssen es nur nach jQuery und jQuery UI aufzunehmen.

<script src="jquery.ui.touch-punch.min.js"></script>