jQuery Mobile Sides Begivenheder

jQuery Mobile Sides Begivenheder

Begivenheder, der håndterer sider i jQuery Mobile, opdeles i fire kategorier:

  • Sideinitialisering - Før siden oprettes, når siden oprettes og efter sideinitialisering
  • Sideindlæsning/Afbrænding - Når en ekstern side indlæses, afbrændes eller fejler
  • Sideovergang - Før og efter sideovergang
  • Sideændring - Når siden ændres eller fejler

For fuld information om alle jQuery Mobile begivenheder, besøg vores jQuery Mobile begivenhedshåndbog.

jQuery Mobile Initialization begivenhed

Når en typisk side i jQuery Mobile initialiseres, går den gennem tre faser:

  • Før siden oprettes
  • Sideoprettelse
  • Sideinitialisering

Begivenheder, der udløses i hver fase, kan bruges til at indsætte eller operere kode.

Begivenhed Beskrivelse
pagebeforecreate Da siden er ved at initialisere og jQuery Mobile har begyndt at forbedre siden, udløses denne begivenhed.
pagecreate Da siden er blevet oprettet, men forbedringen er endnu ikke færdig, udløses dette begivenhed.
pageinit Begivenheden udløses, når siden er blevet initialiseret, og jQuery Mobile har fuldført sideforbedringerne.

Følgende eksempel demonstrerer, hvornår hver type begivenhed udløses, når en side oprettes i jQuery Mobile:

Eksempel

$(document).on("pagebeforecreate",function(event){
  alert("Udløst pagebeforecreate-begivenhed!");
}); 
$(document).on("pagecreate",function(event){
  alert("Udløst pagecreate-begivenhed!");
});
$(document).on("pageinit",function(event){
  alert("Udløst pageinit-begivenhed!");
});

Prøv det selv

jQuery Mobile Load-begivenheder

Sidehentningsbegivenheder tilhører eksterne sider.

Uanset hvornår en ekstern side indlæses i DOM, udløses to begivenheder. Den første er pagebeforeload, den anden er pageload (succes) eller pageloadfailed (fejl).

Følgende tabel forklarer disse begivenheder:

Begivenhed Beskrivelse
pagebeforeload Udløses, før nogen sidehentningsforespørgsel foretages.
pageload Udløses, når siden er blevet succesfuldt indsat i DOM.
pageloadfailed Hvis sidehentningsforespørgslen fejler, udløses denne begivenhed. Som standard vises meddelelsen "Error Loading Page".

Følgende demonstrerer, hvordan pageload- og pageloadfailed-begivenheder fungerer:

Eksempel

$(document).on("pageload",function(event,data){
  alert("Udløst pageload-begivenhed!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Beklager, den anmodede side findes ikke.");
});

Prøv det selv

jQuery Mobile-overgangsbegivenheder

Vi kan også bruge begivenheder, når vi går fra en side til en anden.

Sideovergange involverer to sider: en "kommer"-side og en "går"-side - disse overgange gør processen med at ændre den aktuelle aktive side ("kommer"-siden) til den nye side ("går"-siden) mere levende.

Begivenhed Beskrivelse
pagebeforeshow Udløses på "går"-siden, før overgangsanimationen begynder.
pageshow Udløses på "går"-siden, efter at overgangsanimationen er afsluttet.
pagebeforehide Udløses på "kommer"-siden, før overgangsanimationen begynder.
pagehide Udløses på "kommer"-siden, efter at overgangsanimationen er afsluttet.

Følgende demonstrerer, hvordan overgangstiden fungerer:

Eksempel

$(document).on("pagebeforeshow","#pagetwo",function(){ // Når man kommer til side to
  alert("Side to vises snart");
});
$(document).on("pageshow","#pagetwo",function(){ // Når man kommer til side to
  alert("Siderne to vises nu");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Når man forlader side to
  alert("Side to er ved at blive skjult");
});
$(document).on("pagehide","#pagetwo",function(){ // Når man forlader side to
  alert("Siderne to er nu skjult");
});

Prøv det selv