web-dev-qa-db-fra.com

jQuery UI sliders sur les appareils tactiles

Je développe un site Web à l'aide de l'interface utilisateur jQuery. Plusieurs éléments de mon site semblent incompatibles lorsqu'ils sont visualisés sur des appareils à écran tactile. ils ne causent aucune erreur, mais le comportement n'est pas ce qu'il devrait être.

Les éléments en question sont des curseurs et des adaptateurs de plage définis par jQuery UI; sur l'écran tactile, au lieu d'enregistrer un contact comme une poignée et un glisser-déplacer pour le faire glisser sur le curseur, il suffit de faire glisser la page Web entière vers le côté de l'écran. Cela fonctionne si vous appuyez sur la poignée, puis sur l'emplacement du curseur où vous souhaitez que la poignée se termine, mais cela est très lent et pas idéal. Des idées?

J'ai essayé de télécharger le plugin jqtouch, puis de joindre .touch([...]) à tous les appels à slider () et à RangeSlider (), mais cela n'a pas fonctionné.

Merci!

MISE À JOUR: j'ai trouvé ce "correctif" sur le site Web de l'interface utilisateur de jQuery

http://bugs.jqueryui.com/ticket/414

cela dit que cela facilite le curseur sur l'iPhone, mais maintenant pour une autre question stupide: comment puis-je intégrer ce "patch" dans mon code? Dois-je simplement l'inclure au début du code comme un plugin?

slidertouchjqtouch
95
jqcoder

Cette bibliothèque semble offrir ce que vous cherchez:

https://github.com/furf/jquery-ui-touch-punch#readme

Il a aussi quelques exemples de code d'utilisation (ajoutez simplement le plugin):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>
137
dazbradbury

Je voulais juste ajouter de nouvelles informations à ce sujet. Touch-punch fonctionnera correctement pour les iPad et les appareils Android. Mais le curseur ne fonctionnera pas sur les appareils Windows mobiles, dans la mesure où je pourrais tester (avec les dernières versions de jquery ui & Touch punch)

Le correctif est assez simple, ajoutez simplement les règles CSS suivantes au .ui-slider-handle:

-ms-touch-action: none;
touch-action: none;

J'espère que cela t'aides

22
Stijn_d

Comme @dazbradbury l'a suggéré, la bibliothèque touchpunch peut aider à traduire les événements de la souris en événements tactiles. Les paramètres de .draggable () limitent le mouvement du curseur afin qu’il ne puisse pas être déplacé au-delà de son parent.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

EDIT: Si vous utilisez déjà un curseur curseur de l'interface utilisateur Jquery , il vous suffit d'inclure la bibliothèque de touchpunch. N'appelez pas .draggable () pour le .ui-slider-handle, car il écrasera les fonctionnalités existantes.

5
DPH Trading Danish Plate House

J'ai eu le même problème. J'ai développé une interface utilisateur de curseur élaborée à partir du curseur de l'interface utilisateur de jQuery uniquement pour me rendre compte que cela ne fonctionne pas du tout sur mobile. J'ai essayé les suggestions énumérées ici, mais comme j'ai une solution personnalisée qui est uniquement basée sur jQuery UI Slider, cela ne fonctionne pas.

Il suffit d'utiliser noUiSlider .

Il fait toutes les fonctionnalités élaborées (et bien plus encore) comme celui que j’ai construit au-dessus du curseur de jQuery UI. Cela fonctionne à merveille sur les appareils mobiles et est facile à coiffer aussi.

1
Adam Karacsony