web-dev-qa-db-fra.com

jQuery UI slider Prise en charge de Touch & Drag / Drop sur les appareils mobiles

J'ai déjà stylé et implémenté le curseur de l'interface utilisateur jQuery dans un projet. Bien qu’il soit mobile et qu’il se balance correctement, il ne permet pas de toucher et de faire glisser. Au lieu de cela, vous devez toucher où vous voulez que le curseur aille. jQuery Mobile UI le supporte, mais j'ai du temps investi dans ce qui existe déjà.

La fonctionnalité que nous voulons: Ici
Ce que nous utilisons: ici

Sur un bureau, vous ne pouvez pas faire la différence. Sur un appareil mobile, c'est évident.

Quelqu'un sait comment ajouter ce support à l'interface utilisateur jQuery?

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

Merci Seth

jqueryjquery-uitouchjquery-ui-slider
97
Seth

jQuery Ui n'a pas de support tactile. Vous devriez l’utiliser avec jQuery-ui touch punch .

Ajoutez simplement le script après jQuery ui:

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

Vous pouvez également utiliser cdnjs:

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

Remarque: Mieux vaut donner ce repo une étoile sur Github.

243
username

Vous pouvez simplement lier ce js.

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

merci.

4
Sword I