jQuery Mobile sidhändelser
- Föregående sida jQuery Mobile riktning
- Nästa sida jQuery Mobile exempel
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!"); });
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."); });
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å"); });
- Föregående sida jQuery Mobile riktning
- Nästa sida jQuery Mobile exempel