web-dev-qa-db-fra.com

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

Je travaille sur une application Web qui a sa propre apparence. Je souhaite utiliser jQuery Mobile uniquement pour la prise en charge des événements tactiles.

Lorsque je lie jquery.mobile.min.js (sans lier le CSS), la mise en page de ma page est rompue.

Comment puis-je configurer (initialiser) jQuery Mobile pour utiliser uniquement la prise en charge des événements tactiles? Est-ce que je lierais les événements dans le crochet prêt pour le document jQuery puisque je n'aurais aucun é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.

Modifier:

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

jqueryjquery-mobile
58
Sylvain

Si vous souhaitez simplement vous lier à des événements tactiles/gestuels, j'utiliserais plutôt jGestures:

http://jgestures.codeplex.com/

Joli petit plugin jquery que j'ai déjà utilisé sur des projets avec une large gamme d'événements pour se lier à:

Événements disponibles:

changement d'orientation L'appareil est tourné dans le sens horaire ou antihoraire. Cet événement est déclenché par l'appareil et peut utiliser un gyroscope interne.

pincement Se déclenche lors d'un pincement (deux doigts s'éloignant ou se rapprochant).

rotation Se déclenche lors d'un mouvement de rotation (deux doigts tournant dans le sens horaire ou antihoraire).

swipemove Se déclenche lors d'un mouvement de glissement (doigt (s) se déplaçant autour de l'appareil, par exemple en faisant glisser)

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

swipetwo Est déclenché après un geste de mouvement de balayage 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 mouvement de balayage avec trois points de contact (trois doigts ont été déplacés autour de l'appareil)

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

swipeup Est déclenché après un geste de déplacement vers le haut strict

swiperightup Est déclenché après un geste de mouvement de balayage vers la droite et vers le haut

swiperight Est déclenché après un geste de déplacement vers la droite strict

swiperightdown Est déclenché après un geste de mouvement de balayage vers le bas et vers le haut * htwards et downward

swipedown Est déclenché après un geste de déplacement vers le bas strict

swipeleftdown Est déclenché après un mouvement de déplacement vers la gauche et vers le bas

swipeleft Est déclenché après un geste de déplacement vers la gauche strict

swipeleftup Est déclenché après un mouvement de déplacement vers la gauche et vers le haut

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

taptwo Est déclenché après un double tapotement (deux doigts)

tapthree Est déclenché après un geste de tapotement à trois (trois doigts)

pinchopen Se déclenche lorsqu'un geste pinchopen (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 Est déclenché lorsqu'un geste de pincement (deux doigts se rapprochant) s'est produit et que les points de contact (doigts) ont été retirés de l'appareil.

rotatecw Est déclenché lorsqu'un mouvement de rotation dans le sens horaire (deux doigts tournant dans le sens horaire) s'est produit et que les points de contact (doigts) ont été retirés de l'appareil.

rotateccw Est déclenché lorsqu'un mouvement de rotation dans le sens antihoraire (deux doigts tournant dans le sens antihoraire) s'est produit et que les points de contact (doigts) sont supprimés de l'appareil.

51
Steve O

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

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

48
eivers88

jQuery Mobile a maintenant un générateur de téléchargement qui vous permet de sélectionner uniquement les pièces que vous souhaitez, dans ce cas, il vous suffit de cocher la case Touch sous la section Event.

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

33
George

jQM est maintenant découplé:

Widgets: désormais découplés pour les versions flexibles

Nous souhaitons depuis longtemps dissocier tous nos widgets du plugin de page et nous sommes heureux d'annoncer que nous avons finalement obtenu ce changement. Alors, que signifie exactement découplé de toute façon? Eh bien, les widgets et utilitaires individuels ont toujours été divisés en fichiers de script distincts. Cependant, le plugin de page était responsable de la gestion de l'initialisation automatique de tous les plugins officiels trouvés dans le balisage lors de la création de la page. Cette situation a rendu impossible la suppression des plugins dont vous n'avez pas besoin sans provoquer d'erreurs et a généralement créé un mauvais précédent pour les futurs ajouts de widgets.

Maintenant, à peu près tous les widgets de l'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. Cette modification vous permet de réduire considérablement la taille de la bibliothèque en n'incluant que l'ensemble spécifique de widgets ou de fonctionnalités dont vous avez besoin, en plus de la poignée de fichiers de base requis. Bien que nous prévoyions toujours de faire plus de découplage et de nettoyage, les fichiers suivants sont maintenant découplés et peuvent être supprimés du fichier make en toute sécurité avant de créer une génération personnalisée:

  • en-tête/contenu/pied de page
  • pliant
  • groupe de contrôle
  • champ
  • fixheaderfooter
  • bouton
  • case à cocher radio
  • sélectionner
  • curseur
  • saisie de texte
  • liens thématiques
  • listview
  • navbar
  • la grille

Nous allons travailler sur une carte de dépendances car certains widgets dépendent d'autres pour fonctionner. Par exemple, le plug-in de balisage des boutons est appelé par la plupart des widgets ci-dessus. Il ne peut donc être exclu que si vous n'utilisez aucun des widgets qui dépendent des boutons.

Nous élaborons toujours nos recommandations pour cartographier les dépendances des plugins et découpler encore plus les choses. En fin de compte, cela sera indiqué dans un outil de création de téléchargement, alors restez à l'écoute!

Vous pouvez vous diriger vers leur GIT Repo et télécharger simplement ce que vous voulez:

13
Phill Pafford

Une autre nouvelle option est jQuery-Mobile-Events , j'ai eu du mal avec ce problème et ne trouve ce plugin utile.

La construction personnalisée à partir du générateur de téléchargement de jQuery Mobile ne fonctionne pas pour moi. Et jGestures n'a pas l'événement taphold dont j'ai besoin.

5
BMH

Dans le cas où quelqu'un d'autre se heurte à cela (et n'a pas besoin du fichier sur l'un des CDN de jQuery), voici les étapes que j'ai prises pour extraire uniquement les déclencheurs d'événement JQM:

  1. git clone [email protected]:jquery/jquery-mobile
  2. cd jquery-mobile
  3. éditez js/jquery.mobile.js dans votre éditeur préféré
  4. remplacez l'instruction define(...); par define(['./events/touch', './events/orientationchange']);
  5. make
  6. votre JQM uniquement pour les événements est maintenant dans compiled/jquery.mobile.js et compiled/jquery.mobile.min.js

Maintenant, vous pouvez utiliser $(el).tap(fn) et autres sans vous soucier de JQM détourner votre balisage!

5
Casey Foster

prendre soin de ce problème particulier au moment de l'initialisation est presque impossible, votre meilleur pari est d'utiliser data-role = "none" sur l'élément ui sur lequel vous ne souhaitez pas que le style par défaut se produise en tant que tel:

<button type="button" data-role="none">Click Me!</button>​​​​​​​​​

vérifiez-le sur http://jsfiddle.net/JGgrw/13/

2
Ady Ngom

Visitez le lien ci-dessous et sélectionnez uniquement TOUCH, les fonctionnalités qui seront ajoutées sont répertoriées sous chaque case à cocher, donc ne sélectionnez que ce dont vous avez besoin et que vous utiliserez éventuellement. CDN inclura toujours toutes les fonctionnalités et ralentira car la taille du fichier sera plus grande mais pas beaucoup. J'ai testé et fonctionne :)

Exemple de travail mais (Full jQuery Mobile) avec toutes les fonctionnalités, utilisez simplement celui ci-dessous ou téléchargez le dernier script du site officiel personnalisé: https://codepen.io/binaryfever/pen/RGjKGP

http://jquerymobile.com/download-builder/ Le script ci-dessous ne prend en charge que les fonctionnalités suivantes: événements tactiles, notamment: touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstop. 

/*! jQuery Mobile _ Custom Touch Only - v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */

(function(e,t,n){typeof define=="function"&&define.amd?define(["jquery"],function(r){return n(r,e,t),r.mobile}):n(e.jQuery,e,t)})(this,document,function(e,t,n,r){(function(e,t,n,r){function T(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function N(t,n){var i=t.type,s,o,a,l,c,h,p,d,v;t=e.Event(t),t.type=n,s=t.originalEvent,o=e.event.props,i.search(/^(mouse|click)/)>-1&&(o=f);if(s)for(p=o.length,l;p;)l=o[--p],t[l]=s[l];i.search(/mouse(down|up)|click/)>-1&&!t.which&&(t.which=1);if(i.search(/^touch/)!==-1){a=T(s),i=a.touches,c=a.changedTouches,h=i&&i.length?i[0]:c&&c.length?c[0]:r;if(h)for(d=0,v=u.length;d<v;d++)l=u[d],t[l]=h[l]}return t}function C(t){var n={},r,s;while(t){r=e.data(t,i);for(s in r)r[s]&&(n[s]=n.hasVirtualBinding=!0);t=t.parentNode}return n}function k(t,n){var r;while(t){r=e.data(t,i);if(r&&(!n||r[n]))return t;t=t.parentNode}return null}function L(){g=!1}function A(){g=!0}function O(){E=0,v.length=0,m=!1,A()}function M(){L()}function _(){D(),c=setTimeout(function(){c=0,O()},e.vmouse.resetTimerDuration)}function D(){c&&(clearTimeout(c),c=0)}function P(t,n,r){var i;if(r&&r[t]||!r&&k(n.target,t))i=N(n,t),e(n.target).trigger(i);return i}function H(t){var n=e.data(t.target,s),r;!m&&(!E||E!==n)&&(r=P("v"+t.type,t),r&&(r.isDefaultPrevented()&&t.preventDefault(),r.isPropagationStopped()&&t.stopPropagation(),r.isImmediatePropagationStopped()&&t.stopImmediatePropagation()))}function B(t){var n=T(t).touches,r,i,o;n&&n.length===1&&(r=t.target,i=C(r),i.hasVirtualBinding&&(E=w++,e.data(r,s,E),D(),M(),d=!1,o=T(t).touches[0],h=o.pageX,p=o.pageY,P("vmouseover",t,i),P("vmousedown",t,i)))}function j(e){if(g)return;d||P("vmousecancel",e,C(e.target)),d=!0,_()}function F(t){if(g)return;var n=T(t).touches[0],r=d,i=e.vmouse.moveDistanceThreshold,s=C(t.target);d=d||Math.abs(n.pageX-h)>i||Math.abs(n.pageY-p)>i,d&&!r&&P("vmousecancel",t,s),P("vmousemove",t,s),_()}function I(e){if(g)return;A();var t=C(e.target),n,r;P("vmouseup",e,t),d||(n=P("vclick",e,t),n&&n.isDefaultPrevented()&&(r=T(e).changedTouches[0],v.Push({touchID:E,x:r.clientX,y:r.clientY}),m=!0)),P("vmouseout",e,t),d=!1,_()}function q(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function R(){}function U(t){var n=t.substr(1);return{setup:function(){q(this)||e.data(this,i,{});var r=e.data(this,i);r[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,H),e(this).bind(n,R),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",B).bind("touchend",I).bind("touchmove",F).bind("scroll",j))},teardown:function(){--l[t],l[t]||b.unbind(n,H),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",B).unbind("touchmove",F).unbind("touchend",I).unbind("scroll",j));var r=e(this),s=e.data(this,i);s&&(s[t]=!1),r.unbind(n,R),q(this)||r.removeData(i)}}}var i="virtualMouseBindings",s="virtualTouchID",o="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),u="clientX clientY pageX pageY screenX screenY".split(" "),a=e.event.mouseHooks?e.event.mouseHooks.props:[],f=e.event.props.concat(a),l={},c=0,h=0,p=0,d=!1,v=[],m=!1,g=!1,y="addEventListener"in n,b=e(n),w=1,E=0,S,x;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(x=0;x<o.length;x++)e.event.special[o[x]]=U(o[x]);y&&n.addEventListener("click",function(t){var n=v.length,r=t.target,i,o,u,a,f,l;if(n){i=t.clientX,o=t.clientY,S=e.vmouse.clickDistanceThreshold,u=r;while(u){for(a=0;a<n;a++){f=v[a],l=0;if(u===r&&Math.abs(f.x-i)<S&&Math.abs(f.y-o)<S||e.data(u,s)===f.touchID){t.preventDefault(),t.stopPropagation();return}}u=u.parentNode}}},!0)})(e,t,n),function(e){e.mobile={}}(e),function(e,t){var r={touch:"ontouchend"in n};e.mobile.support=e.mobile.support||{},e.extend(e.support,r),e.extend(e.mobile.support,r)}(e),function(e,t,r){function l(t,n,i,s){var o=i.type;i.type=n,s?e.event.trigger(i,r,t):e.event.dispatch.call(t,i),i.type=o}var i=e(n),s=e.mobile.support.touch,o="touchmove scroll",u=s?"touchstart":"mousedown",a=s?"touchend":"mouseup",f=s?"touchmove":"mousemove";e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)},e.attrFn&&(e.attrFn[n]=!0)}),e.event.special.scrollstart={enabled:!0,setup:function(){function s(e,n){r=n,l(t,r?"scrollstart":"scrollstop",e)}var t=this,n=e(t),r,i;n.bind(o,function(t){if(!e.event.special.scrollstart.enabled)return;r||s(t,!0),clearTimeout(i),i=setTimeout(function(){s(t,!1)},50)})},teardown:function(){e(this).unbind(o)}},e.event.special.tap={tapholdThreshold:750,emitTapOnTaphold:!0,setup:function(){var t=this,n=e(t),r=!1;n.bind("vmousedown",function(s){function a(){clearTimeout(u)}function f(){a(),n.unbind("vclick",c).unbind("vmouseup",a),i.unbind("vmousecancel",f)}function c(e){f(),!r&&o===e.target?l(t,"tap",e):r&&e.preventDefault()}r=!1;if(s.which&&s.which!==1)return!1;var o=s.target,u;n.bind("vmouseup",a).bind("vclick",c),i.bind("vmousecancel",f),u=setTimeout(function(){e.event.special.tap.emitTapOnTaphold||(r=!0),l(t,"taphold",e.Event("taphold",{target:o}))},e.event.special.tap.tapholdThreshold)})},teardown:function(){e(this).unbind("vmousedown").unbind("vclick").unbind("vmouseup"),i.unbind("vmousecancel")}},e.event.special.swipe={scrollSupressionThreshold:30,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:30,getLocation:function(e){var n=t.pageXOffset,r=t.pageYOffset,i=e.clientX,s=e.clientY;if(e.pageY===0&&Math.floor(s)>Math.floor(e.pageY)||e.pageX===0&&Math.floor(i)>Math.floor(e.pageX))i-=n,s-=r;else if(s<e.pageY-r||i<e.pageX-n)i=e.pageX-n,s=e.pageY-r;return{x:i,y:s}},start:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y],Origin:e(t.target)}},stop:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y]}},handleSwipe:function(t,n,r,i){if(n.time-t.time<e.event.special.swipe.durationThreshold&&Math.abs(t.coords[0]-n.coords[0])>e.event.special.swipe.horizontalDistanceThreshold&&Math.abs(t.coords[1]-n.coords[1])<e.event.special.swipe.verticalDistanceThreshold){var s=t.coords[0]>n.coords[0]?"swipeleft":"swiperight";return l(r,"swipe",e.Event("swipe",{target:i,swipestart:t,swipestop:n}),!0),l(r,s,e.Event(s,{target:i,swipestart:t,swipestop:n}),!0),!0}return!1},eventInProgress:!1,setup:function(){var t,n=this,r=e(n),s={};t=e.data(this,"mobile-events"),t||(t={length:0},e.data(this,"mobile-events",t)),t.length++,t.swipe=s,s.start=function(t){if(e.event.special.swipe.eventInProgress)return;e.event.special.swipe.eventInProgress=!0;var r,o=e.event.special.swipe.start(t),u=t.target,l=!1;s.move=function(t){if(!o||t.isDefaultPrevented())return;r=e.event.special.swipe.stop(t),l||(l=e.event.special.swipe.handleSwipe(o,r,n,u),l&&(e.event.special.swipe.eventInProgress=!1)),Math.abs(o.coords[0]-r.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()},s.stop=function(){l=!0,e.event.special.swipe.eventInProgress=!1,i.off(f,s.move),s.move=null},i.on(f,s.move).one(a,s.stop)},r.on(u,s.start)},teardown:function(){var t,n;t=e.data(this,"mobile-events"),t&&(n=t.swipe,delete t.swipe,t.length--,t.length===0&&e.removeData(this,"mobile-events")),n&&(n.start&&e(this).off(u,n.start),n.move&&i.off(f,n.move),n.stop&&i.off(a,n.stop))}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe.left",swiperight:"swipe.right"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)},teardown:function(){e(this).unbind(n)}}})}(e,this)});
0
Bmuzammil