jQuery Mobile Pagina Evenementen

jQuery Mobile Pagina Evenementen

Evenementen die met pagina's omgaan in jQuery Mobile worden in vier categorieën onderverdeeld:

  • Pagina Initialisatie - Voor de creatie van de pagina, tijdens de creatie van de pagina en na de initialisatie van de pagina
  • Pagina Laden/Unladen - Wanneer een externe pagina wordt geladen, ontladen of falst
  • Pagina Overgang - Voor en na de paginaovergang
  • Pagina Wissel - Wanneer de pagina wordt gewisseld of falst

Voor volledige informatie over alle jQuery Mobile evenementen, bezoek onze jQuery Mobile Event Referenties Handleiding.

jQuery Mobile Initialization evenement

Wanneer een typische pagina in jQuery Mobile wordt geïnitialiseerd, doormaakt deze drie fases:

  • Voor de creatie van de pagina
  • Pagina creatie
  • Pagina initialisatie

Elk evenement dat wordt geactiveerd tijdens elke fase kan worden gebruikt om code in te voegen of te manipuleren.

Gebeurtenis Beschrijving
pagebeforecreate Wanneer de pagina net voor de initialisatie staat en jQuery Mobile de pagina al heeft versterkt, wordt dit evenement geactiveerd.
pagecreate Wanneer de pagina is gecreëerd, maar de versterking nog niet is voltooid, wordt dit evenement geactiveerd.
pageinit Deze gebeurtenis wordt geactiveerd nadat de pagina is geïnitieerd en jQuery Mobile de pagina heeft versterkt.

Het volgende voorbeeld demonstreert wanneer elke gebeurtenis wordt geactiveerd bij het maken van een pagina in jQuery Mobile:

Voorbeeld

$("document").on("pagebeforecreate",function(event){
  alert("Pagebeforecreate gebeurtenis geactiveerd!");
}); 
$("document").on("pagecreate",function(event){
  alert("Pagecreate gebeurtenis geactiveerd!");
});
$("document").on("pageinit",function(event){
  alert("Pageinit gebeurtenis geactiveerd!");
});

Probeer het zelf

jQuery Mobile Load gebeurtenissen

Pagina-ladegebeurtenissen behoren tot externe pagina's.

Ongeacht wanneer een externe pagina in de DOM wordt geladen, worden twee gebeurtenissen geactiveerd. De eerste is pagebeforeload, de tweede is pageload (succes) of pageloadfailed (mislukt).

De tabel hieronder verduidelijkt deze gebeurtenissen:

Gebeurtenis Beschrijving
pagebeforeload Wordt geactiveerd voordat een aanvraag voor pagina laden wordt gedaan.
pageload Wordt geactiveerd nadat de pagina succesvol is geladen en in de DOM is ingevoegd.
pageloadfailed Als de aanvraag voor pagina laden mislukt, wordt deze gebeurtenis geactiveerd. Standaard wordt het bericht "Error Loading Page" weergegeven.

Hieronder wordt het werkingssysteem van de pageload en pageloadfailed gebeurtenissen gedemonstreerd:

Voorbeeld

$("document").on("pageload",function(event,data){
  alert("Pageload gebeurtenis geactiveerd!\nURL: " + data.url);
});
$("document").on("pageloadfailed",function(event,data){
  alert("Sorry, de gevraagde pagina bestaat niet.");
});

Probeer het zelf

jQuery Mobile overgangsgebeurtenissen

We kunnen ook gebeurtenissen gebruiken bij het overgaan van een pagina naar de volgende.

Pagina-overgangen betreffen twee pagina's: een "komende" pagina en een "gaande" pagina - deze overgangen maken het proces van het veranderen van de huidige actieve pagina (de "komende" pagina) naar de nieuwe pagina (de "gaande" pagina) meer dynamisch.

Gebeurtenis Beschrijving
pagebeforeshow Wordt geactiveerd op de "gaande" pagina, voordat de overgangsanimatie begint.
pageshow Wordt geactiveerd op de "gaande" pagina, na voltooiing van de overgangsanimatie.
pagebeforehide Wordt geactiveerd op de "komende" pagina, voordat de overgangsanimatie begint.
pagehide Wordt geactiveerd op de "komende" pagina, na voltooiing van de overgangsanimatie.

Hieronder wordt het werkingssysteem van de overgangstijd gedemonstreerd:

Voorbeeld

$("document").on("pagebeforeshow","#pagetwo",function(){ // Als je de pagina twee binnenkomt
  alert("De pagina twee zal worden weergegeven");
});
$("document").on("pageshow","#pagetwo",function(){ // Als je de pagina twee binnenkomt
  alert("De pagina twee wordt nu weergegeven");
});
$("document").on("pagebeforehide","#pagetwo",function(){ // Als je de pagina twee verlaat
  alert("De pagina twee gaat nu verborgen worden");
});
$("document").on("pagehide","#pagetwo",function(){ // Als je de pagina twee verlaat
  alert("De pagina twee is nu verborgen");
});

Probeer het zelf