Explication détaillée de la surveillance et de l'utilisation des événements jQuery-mobile

Les exemples de cet article décrivent la surveillance et l'utilisation des événements jQuery-mobile. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Événement tactile - déclenché lorsque l'utilisateur touche l'écran (appuyez et faites glisser)
Événement de défilement - déclenché lors du défilement de haut en bas
Événement de direction - lorsque l'événement
de page de l'appareil est déclenché lors d'une rotation verticale ou horizontale - déclenché lorsque la page est affichée, masquée, créée, chargée et/ou déchargée

1. Événement d'initialisation

1. Chargement de la page d'événement prêt terminé

$(document).ready(function(){
  //your code here...
});

2. Chargement de la page, événement d'achèvement deux pageinit

$(document).on('pageinit','#pageone',function(){
  //your code here...
});

3. 🎜>

$(元素).on('事件',funciton(){
  //code here...
})

2. Événement tactile

l'événement tap est déclenché lorsque l'utilisateur appuie sur un élément

l'événement taphold est déclenché lorsque l'utilisateur appuie sur un élément et le maintient enfoncé. pendant une seconde
swipe L'événement est déclenché lorsque l'utilisateur glisse de plus de 30px horizontalement sur un élément
swipeleft L'événement est déclenché lorsque l'utilisateur glisse de plus de 30px depuis la gauche sur un élément
swiperight L'événement est déclenché lorsque l'utilisateur glisse de plus de 30px depuis la gauche sur un élément Il est déclenché lorsque le slide droit dépasse 30px

3 Événement Scroll

l'événement scrollstart est déclenché lorsque l'utilisateur commence à faire défiler l'élément. page

(les appareils iOS gèleront le fonctionnement du DOM lorsque l'événement de défilement se produit)
L'événement scrollstop est déclenché lorsque l'utilisateur arrête de faire défiler la page

Orientation (rotation horizontale et verticale de l'écran)

4. 🎜>

L'événement orientationchange est déclenché lorsque l'utilisateur fait pivoter l'appareil mobile verticalement ou horizontalement

Peut détecter les écrans horizontaux et verticaux via window.orientation

$(window).on("orientationchange",function(){
 if(window.orientation == 0) // Portrait
 {
  $("p").css({"background-color":"yellow","font-size":"300%"});
 }
 else // Landscape
 {
  $("p").css({"background-color":"pink","font-size":"200%"});
 }
});

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 la page - lorsque la page externe se charge, se décharge ou échoue

Transition de la page - avant et après la transition de la page
Changement de page - Lorsque la page est modifiée ou rencontre un échec

[Événement d'initialisation]

pagebeforecreate Cet événement est déclenché lorsque la page est sur le point d'être initialisée et avant que jQuery Mobile n'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 une fois que jQuery Mobile a terminé les améliorations de la page.

【Événement de chargement】

pagebeforeload est déclenché avant qu'une demande de chargement de page ne soit effectuée.

pageload se déclenche une fois que la page a été chargée et insérée avec succès dans le DOM.

$(document).on("pagebeforecreate",function(event){})

pageloadfailed Cet événement est déclenché si la demande de chargement de la page échoue. Par défaut, le message « Erreur de chargement de la page » s'affichera.

[Événement de transition]

pagebeforeshow est déclenché sur la page "Go", avant le début de l'animation de transition.

pageshow est déclenché sur la page "vers", une fois l'animation de transition terminée.

$(document).on("pageload",function(event,data){})

pagebeforehide est déclenché sur la page "à venir", avant le début de l'animation de transition.

pagehide est déclenché sur la page "à venir", une fois l'animation de transition terminée.

Pour plus de détails sur la surveillance des événements et l'utilisation de jQuery-mobile, veuillez faire attention au site Web PHP chinois !

$(document).on("pagebeforeshow","#pagetwo",function(){ })