Développeur web
Comment utiliser les fonctionnalités de jQuery UI sur les appareils mobiles (tactiles)
Introduction
L'absence d'une version officielle de jQuery Mobile nous contraint à adapter les fonctionnalités de jQuery UI aux navigateurs de bureau. Cependant, cette transition ne garantit pas une expérience utilisateur optimale sur les appareils mobiles.
Limitations des fonctionnalités sur les appareils mobiles
Les fonctionnalités de jQuery UI ne prennent pas en charge les événements tactiles (touchstart/touchmove/touchend) nécessaires à l'interaction avec les widgets, contrairement aux événements de souris (mouseover/mousemove/mouseout).
Exemple de limitation et besoin de compatibilité tactile
Par exemple, sur un iPad, le curseur d'un curseur ne changera pas sa valeur tant que l'utilisateur ne relâchera pas. Idéalement, vous voudriez que les valeurs changent pendant que vous faites glisser le curseur, comme sur un ordinateur.
Solution temporaire : jQuery UI Touch Punch
En attendant une version officielle adaptée aux appareils mobiles, une solution temporaire consiste à utiliser jQuery UI Touch Punch pour étendre ces fonctionnalités aux téléphones et aux iPad. Cette astuce fournit une solution simple pour rendre les fonctionnalités compatibles avec les appareils mobiles.
Implémentation de jQuery UI Touch Punch
"jQuery UI Touch Punch est une petite astuce qui permet l'utilisation d'événements tactiles sur les sites utilisant la bibliothèque d'interface utilisateur jQuery UI."
Instructions d'implémentation
Son implémentation est assez simple. Voici comment procéder :
-
Inclure les bibliothèques jQuery et jQuery UI
Inclure la version désirée de jQuery et jQuery UI.
<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> -
Télécharger jQuery UI Touch Punch
Vous pouvez télécharger jQuery UI Touch Punch depuis le lien suivant : https://github.com/furf/jquery-ui-touch-punch. Vous avez le choix entre les versions jquery.ui.touch-punch.js et jquery.ui.touch-punch.min.js.
-
Ajouter jQuery UI Touch Punch
Inclure jQuery UI Touch Punch (après jquery.ui.min.js).
<script src="jquery.ui.touch-punch.min.js"></script> -
Activer jQuery UI Touch Punch
Vous pouvez l'activer en appliquant la fonction "draggable" sur l'élément nécessitant le support tactile (après l'inclusion de jQuery UI Touch Punch).
<script>$('#widget').draggable();</script>
Et voilà, votre interface devrait désormais fonctionner sur les appareils mobiles.