jQuery Mobile sivutapahtumat

jQuery Mobile sivutapahtumat

jQuery Mobile:ssa sivuihin liittyvät tapahtumat jaetaan neljään luokkaan:

  • Sivun alustus - ennen sivun luomista, sivun luomisen aikana ja sivun alustuksen jälkeen
  • Sivun lataus/irrotus - kun ulkoinen sivu ladataan, irrotetaan tai tapahtuu virhe
  • Sivun siirtyminen - ennen ja jälkeen sivun siirtymisen
  • Sivun muutos - kun sivu muuttuu tai tapahtuu virhe

Jos haluat täydellisen tiedon kaikista jQuery Mobile:n tapahtumista, vieraile jQuery Mobile tapahtumien viittauskirja.

jQuery Mobile Initialization -tapahtuma

Kun jQuery Mobile:n yleinen sivu alustetaan, se kokee kolme vaihetta:

  • Ennen sivun luomista
  • Sivun luominen
  • Sivun alustus

Jokaisessa vaiheessa käynnistyvät tapahtumat voidaan käyttää koodin lisäämiseen tai muokkaamiseen.

tapahtuma kuvaus
pagebeforecreate Kun sivu on valmistautumassa alustukseen ja ennen kuin jQuery Mobile on aloittanut sivun vahvistamisen, käynnistä tämä tapahtuma.
pagecreate Kun sivu on luotu, mutta ennen kuin se on vahvistettu, käynnistä tämä tapahtuma.
pageinit Tapahtuu, kun sivu on käytännönläheisesti käynnistetty ja jQuery Mobile on suorittanut sivun vahvistamisen.

Seuraavassa esimerkissä kuvataan, milloin jokainen tapahtuma käynnistyy jQuery Mobile -sivun luonnissa:

esimerkki

$(document).on("pagebeforecreate",function(event){
  alert("Triggered pagebeforecreate event!");
}); 
$(document).on("pagecreate",function(event){
  alert("Triggered pagecreate event!");
});
$(document).on("pageinit",function(event){
  alert("Triggered pageinit event!");
});

Kokeile itse

jQuery Mobile -lataustapahtumat

Sivun lataustapahtumat kuuluvat ulkoisiin sivuihin.

Kun ulkoinen sivu ladataan DOMiin, käynnistyy kaksi tapahtumaa. Ensimmäinen on pagebeforeload ja toinen on pageload (onnistunut) tai pageloadfailed (epäonnistunut).

Seuraavassa taulukossa selitetään nämä tapahtumat:

tapahtuma kuvaus
pagebeforeload Tapahtuu ennen kuin minkään sivun latauspyyntöä tehdään.
pageload Tapahtuu, kun sivu on ladattu onnistuneesti ja lisätty DOMiin.
pageloadfailed Jos sivun latauspyyntö epäonnistuu, tapahtuma käynnistyy. Oletuksena näytetään viesti "Error Loading Page".

Seuraavassa esimerkissä kuvataan pageload- ja pageloadfailed-tapahtumien toimintaperiaatetta:

esimerkki

$(document).on("pageload",function(event,data){
  alert("Triggered pageload event!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Anteeksi, pyydettynä sivua ei ole olemassa.");
});

Kokeile itse

jQuery Mobile -siirtymätapahtumat

Voimme käyttää tapahtumia myös, kun siirrytään yhdestä sivusta toiseen.

Sivuvaihdot sisältävät kaksi sivua: yhden "tulevan" sivun ja yhden "menneen" sivun - nämä siirtymät tekevät nykyisen aktiivisen sivun ("tulevan" sivun) uuden sivun ("menneen" sivun) muuttumisprosessista dynaamisempaa.

tapahtuma kuvaus
pagebeforeshow Tapahtuu "menneen" sivulla, ennen kuin siirtymäanimaatio alkaa.
pageshow Tapahtuu "menneen" sivulla, kun siirtymäanimaatio on valmis.
pagebeforehide Tapahtuu "tulevan" sivulla, ennen kuin siirtymäanimaatio alkaa.
pagehide Tapahtuu "tulevan" sivulla, kun siirtymäanimaatio on valmis.

Seuraavassa esimerkissä kuvataan siirtymäaikojen toimintaperiaatetta:

esimerkki

$(document).on("pagebeforeshow","#pagetwo",function(){ // Kun siirrytään sivuun kaksi
  alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // Kun siirrytään sivuun kaksi
  alert("Nyt näytetään sivu kaksi");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Kun poistutaan sivusta kaksi
  alert("Sivu kaksi piilotetaan pian");
});
$(document).on("pagehide","#pagetwo",function(){ // Kun poistutaan sivusta kaksi
  alert("Nyt sivu kaksi piilotetaan");
});

Kokeile itse