Apprenez à gérer les événements disponibles dans jQuery Mobile.
Découvrez les événements tactiles spécifiques aux périphériques mobiles, mais aussi les événements lié à l’orientation de la page, à l’initialisation de la page, à la création de la page ou au changement de page.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les événements du framework jQuery Mobile
Bonjour à tous et bienvenu sur Développement Facile.
On continue ensemble cette série de cours dédiée au FrameWork jQuery Mobile, là vous allez découvrir les événements qui sont disponibles dans jQuery Mobile et que vous pouvez utiliser à votre avantage pour créer des applications très interactives avec vos visiteurs.
Les événements tactiles
Il faut savoir que jQuery Mobile, il gère plusieurs éléments spécifiques aux périphériques mobiles, comme :
tap, c’est lorsque l’utilisateur effectue une pression sur un élément et retire le doigt rapidement,
taphold il laisse le doigt appuyé pendant plus d’une seconde,
swipe il glisse, il touche un élément et il effectue un glissé vers la gauche, vers la droite, vers le haut, vers le bas,
swiperight c’est un glissement vers la droite,
swipeleft un glissement vers la gauche.
Ce sont des événements que vous pouvez écouter, il suffit d’utiliser le code source, de les écouter sur une div, par exemple, avec un identifiant div, et de lancer vos actions sur le clic de l’utilisateur ou lorsqu’il effectue un glissement, à vous de voir.
Les événements de changement d’orientation
Il faut savoir que lorsque l’utilisateur tourne son téléphone portable de portrait en mode paysage, jQuery Mobile diffuse l’événement orientationchange, il est possible de mettre en place des actions spécifiques comme cacher certains éléments, en montrer d’autres, redimensionner des éléments, ou les déplacer, parce que en mode portait et en mode paysage votre site internet doit s’adapter, en tout cas son affichage doit s’adapter, écoutez l’événement orientationchange, et il envoie un paramètre avec la chaîne de caractères portrait ou landscape pour mode portrait ou mode paysage, et comme ça, ça vous permet d’adapter votre site Internet en fonction du mode landscape ou portrait du mobile ou de la tablette de votre utilisateur.
Les événements d’initialisation de page
Vous avez les événements, tout ce qui est événements d’initialisation de page, l’événement pageinit qui se produit une fois que tous les éléments de la page ont été traités pas jQuery Mobile, vous pouvez lancer des actions, par exemple avec du JavaScript effectuez des modifications directement dans le DOM de la page, avec l’événement pagebeforecreate, avant que la page soit créée vous pouvez réaliser ces changements, par exemple, ajouter un item, un élément dans une liste, ajouter des éléments en manipulant le DOM directement. Si vous ne souhaitez pas utiliser les éléments de présentation de jQuery Mobile, mais plutôt vos propres éléments de présentation, il suffit de générer un événement pagebeforecreate, qui va renvoyer la valeur false pour empêcher jQuery Mobile de convertir la page avec les graphismes jQuery Mobile.
Ou soit vous souhaitez manipuler les éléments de la page, après que jQuery Mobile est affiché celle-ci, vous pouvez ajouter votre code avec le gestionnaire d’événements pageinit, et rajouter des éléments après le chargement de la page, tout simplement, c’est un événement pageinit très pratique.
Les événements de création de page (create)
Vous avez les événements, tous ce qui est création de pages, il est possible d’insérer du contenu dans une page mobile après que jQuery Mobile est initialisé la page et traité ses éléments. La page s’affiche pour l’internaute, vous avez un formulaire, des boutons, et lorsque l’utilisateur clic sur le bouton valider vous pouvez créer un formulaire en manipulant le DOM en JavaScript, et l’afficher au format, avec les graphismes de jQuery Mobile.
Donc du coup, il suffit de faire appel à l’événement create, pour que jQuery Mobile ré analyse les nouveaux éléments, et qu’il applique les bons graphismes.
Vous avez également jQuery Mobile changePage qui gère le changement d’une page à une autre page, jQuery Mobile, avec cette méthode, s’occupe du chargement de la page cible via Ajax, la transformation des feuilles de style, les feuilles de styles, votre formulaire est affiché au format jQuery Mobile, et des effets de transition. Avec cette méthode changePage, il est appelé automatiquement dès que utilisateur clique sur un lien vers une autre page, mais vous pouvez l’appeler directement pour modifier des pages avec votre propre code, donc il faut savoir que la méthode changePage déclare les événements suivants, je vous en ai parlé il y a un instant, pagebeforecreate, lorsque la méthode changePage commence à fonctionner, c’est avant toute action de sa part, vous pouvez utiliser cet événement donc écouter cet événement,
pagechange c’est juste avant que changepage la méthode, changepage ai terminé son action, à ce stade la page cible est déjà chargée, la transition effectuée, et l’affichage est effectué, mais vous pouvez encore changer des éléments, la page a été affichée, traitée par jQuery Mobile, mais vous pouvez en écoutant l’événement pagechange ajouter des éléments dans votre page, modifier le DOM, et pagechangefailed c’est diffusé lorsque la méthode changepage n’a pas pu charger la page cible dans le cas d’une erreur 404, page introuvable, là également vous pouvez modifier le DOM en écoutant l’événement pagechangefailed.
Les événements de changement de page
Vous pouvez lier tous ces événements à des gestionnaires d’événements, comme je vous l’ai dit, pour intervenir avant ou après le changement d’une page, les trois événements trois événements que je vous aient présentés passent en paramètres au gestionnaire d’événement, l’objet événement lui-même, et un objet Data qui possède deux propriétés : toPage, c’est l’URL de la page cible ou un objet qui contient l’élément du DOM du data-role page, de la page cible, et option la deuxième propriété, c’est un objet qui contient des propriétés pour le changement de page, par exemple l’effet de transition, et le type qui détermine si la requête doit être faite par la méthode get ou post.
L’événement pagebeforechange est très utile car il vous permet d’intervenir chaque fois que jQuery Mobile change de page, si vous souhaitez, je ne sais pas, faire du Google Analytics un compteur, modifier es pages à la volée, utilisez l’événement pagebeforechange.
Exemple d’application
On regarde ensemble un exemple de code source. Comme je vous le disais j’ai personnalisé avec une classe jQuery classe CSS jQuery ici, jQuery Mobile avec la taille de la police, et j’ai modifié un paramètre par défaut, erreur lors du chargement de la page, je l’ai francisé une bonne fois pour toute. Alors là, j’écoute des événements, ça ajoute un item de la liste avant la modification des balises par jQuery Mobile, add before module 4, il est ajouté ici, avant les modifications sur l’événement page before create, on appelle la méthode on, tout simplement, sur #home, la page elle a un id home, la page jQuery Mobile, la page affichée dans la tablette ou le smartphone de l’utilisateur, id home, tout simplement.
Ensuite qu’est-ce que je fais d’autre ? Je rafraîchis la liste, parce qu’avec l’événement pageinint, après que jQuery Mobile ai effectué tout le traitement des balises, et bien j’ajoute un élément si je recharge la page, c’est en direct, c’est instantané, et je rafraîchis, parce que si je ne rafraîchis pas, qu’est-ce qu’il se passe ? L’élément est en vieux format classique HTML, il n’est pas au format jQuery.
Ensuite home c’est toutes les actions tactiles, donc l’écho des actions tactiles sur cette balise, donc la balise div, appuyez pour tenir ou faire glisser qui est ici, appuyez, appui tenu, glissement droite, glissement gauche, et les différents glissements qu’il peut y avoir. Ça c’est le tactile, enfin ça simule le tactile, bien évidemment parce que je suis sur un ordinateur de bureau, le tactile est simulé avec les événements qui sont envoyés ici, grâce à ça, append pour compléter la balise glissement droite, glissement gauche, le clic, glissement, le clic tenu, le clic rapide, qu’est-ce qu’il y a d’autre ? En cas de changement d’orientation d’écran mode portrait, mode paysage, mode portrait donc on écoute l’événement orientationchange, et ici sur un clic on va créer un formulaire tout simplement, et le rajouter dans form_content, il y a une div qui s’appelle form_content qui est ici, il y a un bouton qui s’appelle ici ajouter une alerte, ça ajoute une alerte quand je clic, une liste dynamique, ça ajoute une liste dynamique quand je clic, tout simplement, et là le formulaire quand je clic ça ajoute un formulaire que vous pouvez valider. Alors je vous montre le message d’alerte de la liste dynamique qui est créée, je recharge la page pour vous montrer la création de la liste dynamique, alors comment ça se passe la création de la liste dynamique ?
J’ai justement ici, pagebeforechange, je vous ai coupé alerte, casealerte, dans le bouton ici, data roll bouton, data unit, href alerte, hnit module, vous avez vu, des liens HTML # alerte, # quelque chose, # identifiant on va dire, avant que la page soit modifiée, on capture la page, on récupère son URL, on récupère le h de l’url, l’identifiant et en modifie la page, on affiche une alerte, on affiche une id. Vous avez vu la puissance de l’événement pagebefore pour modifier en direct vos applications jQuery.
Votre plan d’actions !
A travers ce cours, vous avez vu les événements qui sont très puissants avec jQuery Mobile, pour modifiez vos pages en direct, avant d’appeler la page suivante, c’est vraiment un exemple simple, mais à travailler avec, à partir de ces exemples simples vous pouvez créer des applications jQuery Mobile très avancées.
Vous retrouverez comme d’habitude des exemples de codes sources sous ce cours vidéo, si vous avez des questions, posez-les sous ce cours vidéo, et je vous invite dès maintenant à passer à la deuxième vidéo, au-dessus de cette vidéo vous avez une image cliquable qui renvoie sur la deuxième vidéo, ou alors vous attendez la fin de cette vidéo, elle va se transformer en liens cliquable, et donc dans la deuxième vidéo vous aurez la possibilité d’accéder à tout ce qui est nécessaire pour que vous puissiez utiliser et connaître jQuery, toutes les possibilités de du framework jQuery, jQuery UI, jQuery Mobile, du Framework Dojo, tous cela est expliqué dans la deuxième vidéo, donc attendez la fin de cette vidéo, ça va se transformer en liens cliquable, et vous pourrez accéder à la deuxième vidéo, en attendant je vous dis à tout de suite sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple d’utilisation des événements de jQuery Mobile
Retrouvez le code source commenté pour utiliser les différents événements de jQuery Mobile.
Téléchargement du code source Exemple d'utilisation des événements avec jQuery Mobile
