Comment utiliser jQuery Mobile uniquement pour sa prise en charge des événements tactiles (sans amélioration de l'interface utilisateur) ?

Question

Je travaille sur une application web qui a son propre look and feel. Je veux utiliser jQuery Mobile uniquement pour le support des événements tactiles.

Lorsque je lie jquery.mobile.min.js (sans lier le css), la mise en page de ma page est cassée.

Comment puis-je configurer (initialiser) jQuery Mobile pour utiliser uniquement le support des événements tactiles ? Devrais-je lier les événements dans le hook jQuery document ready puisque je n'aurais pas d'événement lié à la page JQM ?

Modifier

Voir cet exemple dans jsfiddle : http://jsfiddle.net/redhotsly/JGgrw/ . Le html contient un <button> mais jQuery Mobile a créé un <span> à sa gauche. Si vous inspectez le balisage résultant (F12), vous verrez que jQuery Mobile a également ajouté une classe CSS à mon bouton.

Edit :

J'ai besoin d'une solution où je n'aurai pas à modifier le script de JQM. J'ai besoin d'utiliser le script officiel à partir d'un CDN.

Answer 1

Si vous voulez utiliser jQuery mobile pour les événements tactiles uniquement, ajoutez ce morceau de script. avant vous chargez la bibliothèque jQuery mobile :

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend(  $.mobile , {autoInitializePage: false})});</script>

Cela empêche jquery mobile d'initialiser la page et de toucher le DOM, laissant ainsi votre mise en page tranquille.

Answer 2

Si vous voulez simplement vous lier aux événements de toucher/gestes, j'utiliserais plutôt jGestures :

http://jgestures.codeplex.com/

Petit plugin jquery sympa que j'ai déjà utilisé sur des projets avec une grande variété d'événements à lier :

Événements disponibles :

changement d'orientation Le dispositif est tourné dans le sens des aiguilles d'une montre ou dans le sens inverse. Cet événement est déclenché par le dispositif et peut utiliser un gyroscope interne.

pincée Se déclenche lors d'un geste de pincement (deux doigts qui s'éloignent ou se rapprochent l'un de l'autre).

faire pivoter Se déclenche lors d'un geste de rotation (deux doigts tournant dans le sens des aiguilles d'une montre ou dans le sens inverse).

swipemove est déclenché lors d'un mouvement de balayage (déplacement du ou des doigts autour de l'appareil, par exemple en le faisant glisser).

swipeone est déclenché après un geste de balayage et de déplacement avec un point de contact (un doigt a été déplacé autour de l'appareil).

Passez deux fois est déclenché après un geste de balayage et de déplacement avec deux points de contact (deux doigts ont été déplacés autour de l'appareil).

swipethree est déclenché après un geste de balayage et de déplacement avec trois points de contact (trois doigts ont été déplacés autour de l'appareil).

swipefour est déclenché après un mouvement de balayage avec quatre points de contact (quatre doigts ont été déplacés autour de l'appareil).

swipeup Se déclenche après un geste strict de déplacement vers le haut.

swiperightup Se déclenche après un mouvement de balayage vers la droite et vers le haut.

swiperight Se déclenche après un geste strict de déplacement vers la droite.

swiperightdown Se déclenche après un mouvement de balayage vers le haut et vers le bas.

swipedown Se déclenche après un geste strict de glissement vers le bas.

swipeleftdown Se déclenche après un mouvement de balayage vers la gauche et vers le bas.

glisser vers la gauche Se déclenche après un geste strict de déplacement vers la gauche.

glisser vers la gauche vers le haut Se déclenche après un mouvement de balayage vers la gauche et vers le haut.

tapone Est déclenché après un seul geste de tapotement (avec un doigt)

taptwo Se déclenche après un double geste de tapotement (deux doigts)

tapthree Se déclenche après un geste de tapotement à trois doigts.

pinchopen Se déclenche lorsqu'un geste d'ouverture par pincement (deux doigts s'éloignant l'un de l'autre) se produit et que les points de contact (doigts) sont retirés de l'appareil.

pinchclose Se déclenche lorsqu'un geste de pincement (deux doigts se rapprochant l'un de l'autre) se produit et que les points de contact (doigts) sont retirés de l'appareil.

rotatecw Se déclenche lorsqu'un geste de rotation dans le sens des aiguilles d'une montre (deux doigts tournant dans le sens des aiguilles d'une montre) se produit et que les points de contact (les doigts) sont retirés de l'appareil.

rotateccw Se déclenche lorsqu'un geste de rotation dans le sens inverse des aiguilles d'une montre (deux doigts tournant dans le sens inverse des aiguilles d'une montre) se produit et que les points de contact (doigts) sont retirés. (doigts) sont retirés de l'appareil.

Answer 3

JQuery Mobile dispose désormais d'un Download Builder qui vous permet de sélectionner uniquement les parties que vous souhaitez. Dans ce cas, il vous suffit de cocher la case Touch dans la section Event.

http://jquerymobile.com/download-builder/

Answer 4

JQM est maintenant découplé :

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Widgets : Désormais découplé pour des constructions flexibles

Nous voulions découpler tous nos widgets du plugin de page depuis un certain temps. longtemps maintenant et nous sommes heureux d'annoncer que nous avons finalement obtenu ce changement. Que signifie exactement "découplé" ? Eh bien, les les widgets individuels et les utilitaires ont toujours été décomposés en fichiers script séparés. Cependant, le plugin de page était responsable de de gérer l'auto-initialisation de tous les plugins officiels qui se trouvent dans le balisage à la création de la page. Cette situation rendait impossible de supprimer les plugins dont vous n'avez pas besoin sans provoquer d'erreurs, et en général créer un mauvais précédent pour les futurs ajouts de widgets.

Maintenant, presque tous les widgets d'interface utilisateur de la bibliothèque jQuery Mobile sont complètement découplés afin qu'ils puissent simplement être supprimés s'ils ne sont pas nécessaires pour un projet particulier. Ce changement vous permet de réduire considérablement la la taille de la bibliothèque en n'incluant que l'ensemble spécifique de widgets ou de dont vous avez besoin, en plus de la poignée de fichiers de base nécessaires. Bien que nous prévoyions encore de faire plus de découplage et de nettoyage, les fichiers suivants suivants sont maintenant découplés et peuvent être supprimés du fichier make en toute sécurité avant d'effectuer une construction personnalisée :

• en-tête/contenu/pied de page
• pliable
• groupe de contrôle
• conteneur de terrain
• fixheaderfooter
• bouton
• checkboxradio
• sélectionnez
• glissière
• entrée de texte
• liens thématisation
• aperçu de la liste
• barre de navigation
• grille

Nous allons travailler sur une carte de dépendance parce que quelques widgets dépendent des autres pour fonctionner. Par exemple, le plugin de balisage des boutons est appelé par de nombreux widgets ci-dessus, il ne peut donc être exclu que si vous n'utilisez pas aucun des widgets qui dépendent des boutons.

Nous sommes toujours en train d'élaborer nos recommandations pour le mappage des plugins et découpler encore plus les choses. En fin de compte, cela sera dans un outil de création de téléchargements, alors restez à l'écoute !

Vous pouvez vous rendre sur leur Repo GIT et télécharger ce que vous voulez :

• https://github.com/jquery/jquery-mobile/tree/master/js

Answer 5

Au cas où quelqu'un d'autre rencontrerait ce problème (et n'aurait pas besoin d'un fichier provenant d'un des CDN de jQuery), voici les étapes que j'ai suivies pour extraire uniquement les déclencheurs d'événements JQM :

1. git clone git@github.com:jquery/jquery-mobile
2. cd jquery-mobile
3. modifier js/jquery.mobile.js dans votre éditeur préféré
4. remplacer le define(...); déclaration avec define(['./events/touch', './events/orientationchange']);
5. make
6. votre JQM réservé aux événements est maintenant en compiled/jquery.mobile.js et compiled/jquery.mobile.min.js

Vous pouvez maintenant utiliser $(el).tap(fn) et autres, sans avoir à se soucier que JQM s'approprie votre marge bénéficiaire !