jQuery Mobile sidhändelser

jQuery Mobile sidhändelser

Händelser som hanteras med sidor i jQuery Mobile delas in i fyra kategorier:

  • Page Initialization - Innan sidan skapas, när sidan skapas och efter att sidan initierats
  • Page Load/Unload - När en extern sida laddas, laddas av eller misslyckas
  • Page Transition - Innan och efter sidans övergång
  • Page Change - När sidan ändras eller misslyckas

För fullständig information om alla jQuery Mobile-händelser, besök vår jQuery Mobile händelsesreferenshandbok.

jQuery Mobile Initialization händelse

När en typisk sida i jQuery Mobile initieras, går den igenom tre steg:

  • Innan sidan skapas
  • Sidskapande
  • Sidinitiering

Varje händelse som utlösas vid varje steg kan användas för att infoga eller manipulera kod.

Händelse Beskrivning
pagebeforecreate När sidan ska initieras och innan jQuery Mobile börjar förstärka sidan, utlösas detta händelse.
pagecreate När sidan har skapats, men innan förstärkningen är klar, utlösas detta händelse.
pageinit När sidan har initierats och jQuery Mobile har slutfört sidans förstärkning, utlöses denna händelse.

Följande exempel visar när varje typ av händelse utlöses när sidan skapas i jQuery Mobile:

Exempel

$.document.on("pagebeforecreate",function(event){
  alert("Utlöst pagebeforecreate-händelse!");
}); 
$.document.on("pagecreate",function(event){
  alert("Utlöst pagecreate-händelse!");
});
$.document.on("pageinit",function(event){
  alert("Utlöst pageinit-händelse!");
});

Prova själv

jQuery Mobile Load-händelser

Sidladdningshändelser tillhör externa sidor.

Oavsett när en extern sida laddas in i DOM, utlöses två händelser. Den första är pagebeforeload, den andra är pageload (lyckad) eller pageloadfailed (misslyckad).

Följande tabell förklarar dessa händelser:

Händelse Beskrivning
pagebeforeload Utlöst innan någon sidladdningsförfrågan görs.
pageload Utlöst när sidan har laddats och lades in i DOM.
pageloadfailed Om sidan laddningsförfrågan misslyckas, utlöses denna händelse. Som standard visas meddelandet "Error Loading Page".

Följande demonstrerar hur pageload och pageloadfailed-händelser fungerar:

Exempel

$.document.on("pageload",function(event,data){
  alert("Utlöst pageload-händelse!\nURL: " + data.url);
});
$.document.on("pageloadfailed",function(event,data){
  alert("Beklagar, den efterfrågade sidan finns inte.");
});

Prova själv

jQuery Mobile övergångshändelser

Vi kan också använda händelser när vi går från en sida till nästa.

Sidan övergång involverar två sidor: en "kommande"-sida och en "gående"-sida - dessa övergångar gör processen från den aktuella aktiva sidan ("kommande"-sidan) till den nya sidan (förändringen av "gående"-sidan) mer dynamisk.

Händelse Beskrivning
pagebeforeshow Utlöst på "gående"-sidan, innan övergångsanimationen börjar.
pageshow Utlöst på "gående"-sidan, efter att övergångsanimationen är klar.
pagebeforehide Utlöst på "kommande"-sidan, innan övergångsanimationen börjar.
pagehide Utlöst på "kommande"-sidan, efter att övergångsanimationen är klar.

Följande demonstrerar hur övergångstiden fungerar:

Exempel

$.document.on("pagebeforeshow","#pagetwo",function(){ // När man kommer till sida två
  alert("Sidan två kommer att visas");
});
$.document.on("pageshow","#pagetwo",function(){ // När man kommer till sida två
  alert("Nu visas sida två");
});
$.document.on("pagebeforehide","#pagetwo",function(){ // När man lämnar sidan två
  alert("Sidan två kommer att gömmas");
});
$.document.on("pagehide","#pagetwo",function(){ // När man lämnar sidan två
  alert("Nu gömmer sidan två");
});

Prova själv