Événements de page jQuery Mobile

Événements de page jQuery Mobile

Les événements associés aux pages dans jQuery Mobile sont divisés en quatre catégories :

  • Initialisation de la page - Avant la création de la page, lors de la création de la page et après l'initialisation de la page
  • Chargement/Déchargement de page - Lorsque la page externe est chargée, déchargée ou en cas d'échec
  • Transition de page - Avant et après la transition de la page
  • Changement de page - Lorsque la page est modifiée ou en cas d'échec

Pour obtenir des informations complètes sur tous les événements jQuery Mobile, veuillez visiter notre Guide des événements jQuery Mobile.

Événement d'initialisation jQuery Mobile

Lorsque une page typique de jQuery Mobile est en cours d'initialisation, elle traverse trois étapes :

  • Avant la création de la page
  • Création de la page
  • Initialisation de la page

Tous les événements déclenchés à chaque étape peuvent être utilisés pour insérer ou manipuler le code.

Événement Description
pagebeforecreate L'événement est déclenché lorsque la page est sur le point d'être initialisée et avant que jQuery Mobile ne commence à améliorer la page.
pagecreate L'événement est déclenché lorsque la page a été créée, mais avant que l'amélioration ne soit terminée.
pageinit Déclenché lorsque la page est initialisée et que jQuery Mobile a terminé l'amélioration de la page.

L'exemple suivant montre à quel moment chaque événement est déclenché lors de la création d'une page dans jQuery Mobile :

Exemple

$(document).on("pagebeforecreate",function(event){
  alert("Événement pagebeforecreate déclenché !");
}); 
$(document).on("pagecreate",function(event){
  alert("Événement pagecreate déclenché !");
});
$(document).on("pageinit",function(event){
  alert("Événement pageinit déclenché !")
});

Essayer vous-même

Événements de chargement jQuery Mobile

Les événements de chargement de page appartiennent aux pages externes.

Que ce soit à chaque chargement de DOM externe, deux événements sont déclenchés. Le premier est pagebeforeload, le second est pageload (réussite) ou pageloadfailed (échec).

Le tableau suivant explique ces événements :

Événement Description
pagebeforeload Déclenché avant toute requête de chargement de page.
pageload Déclenché après que la page ait été chargée avec succès et insérée dans le DOM.
pageloadfailed Si la requête de chargement de la page échoue, cet événement est déclenché. Par défaut, le message "Error Loading Page" est affiché.

La suivante démonstration montre le principe de fonctionnement des événements pageload et pageloadfailed :

Exemple

$(document).on("pageload",function(event,data){
  alert("Événement pageload déclenché !\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Désolé, la page demandée n'existe pas.");
});

Essayer vous-même

Événements de transition jQuery Mobile

Nous pouvons également utiliser des événements lorsque nous transitionnons d'une page à l'autre.

La transition de page implique deux pages : une page "venant" et une page "partant" - ces transitions rendent le processus de changement de la page active actuelle (page "venant") vers une nouvelle page (page "partant") plus dynamique.

Événement Description
pagebeforeshow Déclenché sur la page "partant", avant le début de l'animation de transition.
pageshow Déclenché sur la page "partant", après la fin de l'animation de transition.
pagebeforehide Déclenché sur la page "venant", avant le début de l'animation de transition.
pagehide Déclenché sur la page "venant", après la fin de l'animation de transition.

La suivante démonstration montre le principe de fonctionnement du temps de transition :

Exemple

$(document).on("pagebeforeshow","#pagetwo",function(){ // Lorsque l'on entre dans la page deux
  alert("La page deux va s'afficher");
});
$(document).on("pageshow","#pagetwo",function(){ // Lorsque l'on entre dans la page deux
  alert("Page deux maintenant visible");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Lorsque l'on quitte la page deux
  alert("Page deux va bientôt être cachée");
});
$(document).on("pagehide","#pagetwo",function(){ // Lorsque l'on quitte la page deux
  alert("Page deux maintenant cachée");
});

Essayer vous-même