Les évènements et les méthodes

Difficulté Facile
Note
Thématiques
Mis à jour le vendredi 6 décembre 2013

Les évènements jQuery Mobile

La plateforme étant bien différente d'un ordinateur, vous vous doutez que les évènements ne sont pas les mêmes que pour jQuery. L'utilisateur sera dans l'incapacité de cliquer ou de taper sur un clavier, étant donner que les smartphones sont par définition tactiles. Les laboratoires de jQuery ont bien sûr trouvé une parade, et ont mis en place de nouveaux évènements spécialement adaptés pour les mobiles.

Il faut alors considérer le clic comme l'action de toucher. Quant au clavier, la plupart des smartphones intègrent un clavier qui s'affiche seulement lorsque c'est nécessaire. L'accès aux évènements dépendants du clavier ne changent donc pas !

Voici la liste des évènements relatifs au touché :

Nom

Action

tap

un touché sur la page

taphold

un touché maintenu sur la page

swipe

un touché maintenu avec mouvement du doigt

swipeleft

un touché maintenu avec mouvement vers la gauche

swiperight

un touché maintenu avec mouvement vers la droite

scrollstart

lorsqu'on commence à « scroller » (utiliser l’ascenseur de la page)

scrollstop

lorsqu'on arrête de « scroller »

Il existe également orientationchange, qui va se déclencher lorsqu'on incline le téléphone (passage du mode portrait au mode paysage et vice versa).

Vous pourrez travailler avec l'état des pages, car il existe une foule d'évènements qui en sont dépendants. Par exemple, au chargement d'une page, il est commun d'utiliser pageload. Vous pouvez retrouver la liste complète ici.

Les méthodes jQuery Mobile

Le framework possède des propriétés et des méthodes qui lui sont propres, accessibles avec l'objet $.mobile. Vous pourrez alors bénéficier de nouveaux contrôles, dont nous allons voir les principaux.

Contrôler la transition d'une page

Les pages étant chargées en AJAX, le côté esthétique a été mis en avant. Vous pouvez alors noter un effet lorsque vous naviguez de page en page. Cet effet peut être personnalisé au moyen de la propriété defaultPageTransition ; il suffit alors de lui passer pour valeur le nom d'un effet. Voici les plus connus et utilisés :

  • fade, la valeur par défaut, qui affiche le page avec un fondu ;

  • slide, qui fait glisser la page suivante par dessus la page actuelle ;

  • flip, qui va retourner la page et afficher la suivante.

$.mobile.defaultPageTransition = "flip";

Veillez cependant à ne pas trop en abuser, car le navigateur d'Android, qui est très utilisé, ne supporte pas bien les effets de transition. L'autre solution consiste à les désactiver pour ce navigateur et seulement lui, au moyen d'une petite astuce basée, encore une fois, sur les user-agents :

var ua = navigator.userAgent.toLowerCase(); // on récupère le user-agent

if(ua.indexOf("android") > -1){ // si on trouve un user-agent Android
    $.mobile.maxTransitionWidth = 1; // alors on désactive les transitions
}

Envoyer une requête AJAX au changement de page

Le framework mobile embarque une méthode qui permet de fusionner deux choses : une transition, et une requête AJAX. Cela permet un gain de performance, mais rend aussi le code bien plus propre et lisible. Il suffit alors d'utiliser changePage(), avec quelques arguments :

  • la cible, simplement l'URL de la page à qui transmettre des données ;

  • et un objet, qui prend en charge la requête AJAX au moyen de propriétés classiques comme le type, ou les données à envoyer.

$.mobile.changePage('sendmail.php', {
    type : 'POST',
    data : 'sujet=' + sujet + '&contenu=' + contenu
});

Précharger une page

Pour un confort absolument optimal, vous pouvez précharger les pages grâce à loadPage(). Cela permet de mettre la page suivante en attente, et le visiteur n'aura pas à attendre son chargement pour y accéder. C'est donc un gain considérable pour l'expérience utilisateur.

Vous avez juste à indiquer quelle page doit être préchargée :

$.mobile.loadPage('next.html');

Vous avez à présent les bases de la création de version mobile ! Rien ne vous empêche de pousser votre curiosité et d'aller lire la très bonne documentation au sujet de jQuery Mobile.

Nous en avons maintenant terminé avec l'étude des plugins et frameworks officiels de la jQuery Foundation. Les chapitres suivants viseront à parfaire votre apprentissage avec la découverte de plugins très célèbres dans le monde du développement de jQuery !

Les auteurs