jQuery Mobile page Événements
Evénements pour la manipulation des pages dans jQuery Mobile sont divisés en quatre catégories:
- Page Initialisation - Avant la création de page, et lorsque la page a été créée
- Page Load / Unload - Quand une page externe est le chargement, le déchargement ou rencontre un échec
- Page Transition - Avant et après les transitions de page
- Changer de page - Lorsque les pages sont modifiées vers ou à partir, ou rencontre un échec
Pour une référence complète de tous les événements jQuery Mobile, s'il vous plaît aller à notre jQuery Mobile Events Référence .
jQuery Mobile Initialisation Events
Quand une page typique dans jQuery Mobile est initialisée, il passe par deux étapes:
- Avant la création de page
- Création de page
Chaque étape a un événement qui peut être utilisé pour insérer ou de manipuler le code avant ou lorsque jQuery Mobile améliore la page.
| un événement | La description |
|---|---|
| pagebeforecreate | Déclenché lorsque la page est sur le point d'être initialisé, et avant jQuery Mobile a commencé à améliorer la page |
| pagecreate | Déclenché lorsque la page a été créée, mais avant la mise en valeur est terminée |
L'exemple ci-dessous montre lorsque chaque événement se déclenche quand une page est créée en jQuery Mobile:
Exemple
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event fired!");
}); Essayez - le vous - même » jQuery Mobile Charger Events
les événements de chargement des pages sont des pages externes.
Chaque fois qu'une page externe est chargé dans le DOM, 2 événements feu. La première est pagecontainerbeforeload, et le second sera soit pagecontainerload (succès) ou pagecontainerloadfailed (échec).
Ces événements sont expliqués dans le tableau ci-dessous:
| un événement | La description |
|---|---|
| pagecontainerbeforeload | Déclenché avant toute demande de chargement de page est faite |
| pagecontainerload | Déclenché après que la page a été chargée avec succès et inséré dans le DOM |
| pagecontainerloadfailed | Déclenché si la demande de chargement de page échoue. Par défaut, il affiche le message "Erreur de chargement page" |
L'exemple ci-dessous montre comment le pagecontainerload et les événements pagecontainerloadfailed fonctionnent:
Exemple
$(document).on("pagecontainerload",function(event,data){
alert("pageload
event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("Sorry, requested page does not exist.");
}); Essayez - le vous - même » jQuery Mobile Transition Events
Nous pouvons également utiliser des événements pour quand nous passons d'une page à l'autre.
Les transitions de page comportent deux pages: une "de" page et "à" Page - ces transitions animent le changement de la page active actuelle (fromPage) à une nouvelle page (toPage) .
| un événement | La description |
|---|---|
| pagebeforeshow | Déclenché sur le "à" la page, avant que l'animation de transition commence |
| pageshow | Déclenché sur le "à" la page, après l'animation de transition complète |
| pagebeforehide | Déclenché sur la page " à partir", avant le début de l' animation de transition |
| pagehide | Déclenché sur la page " à partir", après l'animation de transition complète |
L'exemple ci-dessous montre comment les événements de transition fonctionnent:
Exemple
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering
pagetwo
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){
// When entering pagetwo
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is now hidden");
}); Essayez - le vous - même »