wake-up-neo.com

jQuery-UI-Schieberegler Unterstützung für Touch & Drag / Drop auf Mobilgeräten

Ich habe den jQuery UI-Schieberegler bereits in einem Projekt gestaltet und implementiert. Während es mobil ist und richtig skaliert, erlaubt es kein Tippen und Ziehen. Stattdessen müssen Sie berühren, wohin der Schieberegler gehen soll. jQuery Mobile UI unterstützt dies, aber ich habe Zeit in das investiert, was bereits vorhanden ist.

Die Funktionalität, die wir wollen: hier
Was wir verwenden: hier

Auf einem Desktop kann man den Unterschied nicht erkennen. Auf einem mobilen Gerät ist es offensichtlich.

Weiß jemand, wie man diese Unterstützung zur Benutzeroberfläche von jquery hinzufügt?

$("#cameraSlider").slider({
  value: 2,
  min: 1,
  max: 3,
  step: 1,
  slide: function(event, ui) {
    cameramen = ui.value;
    return calcTotal();
  }
});

Danke, Seth

jqueryjquery-uitouchjquery-ui-slider
97
Seth

jQuery UI hat keine Touch-Unterstützung. Sie sollten es mit jQuery-ui touch punch verwenden.

Fügen Sie einfach das Skript nach jQuery ui hinzu:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Sie können auch cdnjs verwenden:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Hinweis: Geben Sie dieses Repo einen Stern auf Github.

243
username

Sie können dieses js einfach verlinken.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

vielen Dank.

4
Sword I