jQuery Mobile Événements de page
Événements de page jQuery Mobile
Dans jQuery Mobile, les événements liés aux pages sont divisés en quatre catégories :
- Initialisation de page - Avant la création de la page, lorsque la page est créée, et après l'initialisation de la page
- Chargement/Déchargement de page - Lorsque des pages externes se chargent, se déchargent ou échouent
- Transition de page - Avant et après les transitions de page
- Changement de page - Lorsqu'une page est changée ou échoue
Pour des informations complètes sur tous les événements jQuery Mobile, veuillez consulter notreManuel de référence des événements jQuery Mobile。
Événements d'initialisation jQuery Mobile
Lorsqu'une page typique dans jQuery Mobile est initialisée, elle passe par trois étapes :
- Avant la création de la page
- Création de page
- Initialisation de la page
Les événements déclenchés à chaque étape peuvent être utilisés pour insérer ou manipuler du code.
| Événement | Description |
|---|---|
| pagebeforecreate | Cet événement est déclenché lorsque la page est sur le point d'être initialisée, et avant que jQuery Mobile ait commencé à améliorer la page. |
| pagecreate | Cet événement est déclenché lorsque la page a été créée, mais avant que l'amélioration ne soit terminée. |
| pageinit | Cet événement est déclenché lorsque la page a été initialisée, et après que jQuery Mobile a terminé d'améliorer la page. |
L'exemple suivant montre quand chaque type d'événement est déclenché lors de la création d'une page dans jQuery Mobile :
Exemple
alert("pagebeforecreate event triggered!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event triggered!");
});
Essayez-le vous-même »
Événements de chargement jQuery Mobile
Les événements de chargement de page s'appliquent aux pages externes.
Chaque fois qu'une page externe est chargée dans le DOM, deux événements sont déclenchés. Le premier est pagebeforeload, et le second est pageload (succès) ou pageloadfailed (échec).
Le tableau suivant explique ces événements :
| Événement | Description |
|---|---|
| pagebeforeload | Déclenché avant qu'une quelconque requête de chargement de page ne soit effectuée. |
| pageload | Déclenché après que la page a été chargée avec succès et insérée dans le DOM. |
| pageloadfailed | Si la requête de chargement de page échoue, cet événement est déclenché. Par défaut, un message "Erreur de chargement de la page" sera affiché. |
Ce qui suit montre comment fonctionnent les événements pageload et pagloadfailed :
Exemple
alert("pageload event triggered!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("Désolé, la page demandée n'existe pas.");
});
Essayez-le vous-même »
Événements de transition de jQuery Mobile
Nous pouvons également utiliser des événements lors du passage d'une page à la suivante.
Les transitions de page impliquent deux pages : une page "from" et une page "to" - ces transitions rendent le processus de passage de la page active actuelle (la page "from") à la nouvelle page (la page "to") plus dynamique.
| Événement | Description |
|---|---|
| pagebeforeshow | Déclenché sur la page "to", avant le début de l'animation de transition. |
| pageshow | Déclenché sur la page "to", après la fin de l'animation de transition. |
| pagebeforehide | Déclenché sur la page "from", avant le début de l'animation de transition. |
| pagehide | Déclenché sur la page "from", une fois l'animation de transition terminée. |
Ce qui suit montre comment fonctionne le déroulement temporel des transitions :
Exemple
alert("La page deux est sur le point d'être affichée");
});
$(document).on("pageshow","#pagetwo",function(){ // lors de l'entrée dans la page deux
alert("La page deux est maintenant affichée");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // lors de l'entrée dans la page deux
alert("La page deux est sur le point d'être masquée");
});
$(document).on("pagehide","#pagetwo",function(){ // Lors de la sortie de pagetwo
alert("La page deux est maintenant masquée");
});
Essayez-le vous-même »