jQuery Mobile Pagina Eventi
Eventi per la gestione di pagine in jQuery Mobile sono divisi in quattro categorie:
- Inizializzazione Pagina - Prima di creazione della pagina, e quando è stata creata la pagina
- Pagina Carica / Scarica - Quando una pagina esterna è carico, scarico o incontra un fallimento
- Pagina Transizione - Prima e dopo transizioni di pagina
- Cambio pagina - Quando le pagine vengono modificate da o verso, o incontra un fallimento
Per un riferimento completo di tutti gli eventi jQuery Mobile, si prega di visitare il nostro jQuery Mobile Eventi di riferimento .
jQuery Mobile inizializzazione Eventi
Quando una pagina tipica di jQuery Mobile è inizializzato, passa attraverso due fasi:
- Prima della creazione pagina
- creazione di pagine
Ogni fase ha un evento che può essere utilizzato per inserire o manipolare codice prima o quando jQuery Mobile migliora la pagina.
| Evento | Descrizione |
|---|---|
| pagebeforecreate | Viene attivato quando la pagina sta per essere inizializzato, e prima di jQuery Mobile ha iniziato a migliorare la pagina |
| pagecreate | Innescato quando la pagina è stata creata, ma prima che il miglioramento è completo |
L'esempio che segue dimostra quando ogni evento viene generato quando una pagina viene creato in jQuery Mobile:
Esempio
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate event fired!");
}); Prova tu stesso " jQuery Mobile carico Eventi
gli eventi di caricamento delle pagine sono per pagine esterne.
Ogni volta che una pagina esterna viene caricato nel DOM, 2 eventi fuoco. Il primo è pagecontainerbeforeload, e il secondo o sarà pagecontainerload (esito positivo) o pagecontainerloadfailed (fail).
Questi eventi sono spiegati nella tabella seguente:
| Evento | Descrizione |
|---|---|
| pagecontainerbeforeload | Attivato prima di qualsiasi richiesta di caricamento della pagina è fatta |
| pagecontainerload | Innescato dopo che la pagina è stata caricata con successo e inserito nel DOM |
| pagecontainerloadfailed | Innescato se la richiesta di caricamento della pagina non riesce. Per impostazione predefinita, verrà visualizzato il messaggio "Errore di caricamento pagina" |
L'esempio che segue dimostra come il pagecontainerload ed eventi pagecontainerloadfailed funzionano:
Esempio
$(document).on("pagecontainerload",function(event,data){
alert("pageload
event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("Sorry, requested page does not exist.");
}); Prova tu stesso " jQuery Mobile transizione Eventi
Possiamo anche utilizzare gli eventi per quando abbiamo passaggio da una pagina all'altra.
Transizioni di pagina coinvolgono due pagine: una "da" pagina e un "a" della pagina - queste transizioni animano il passaggio dalla pagina corrente attiva (fromPage) a una nuova pagina (toPage) .
| Evento | Descrizione |
|---|---|
| pagebeforeshow | Innescato sulla "a" pagina, prima che l'animazione di transizione inizia |
| pageshow | Innescato sulla "a" pagina, dopo l'animazione di transizione completa |
| pagebeforehide | Innescato sulla pagina "da", prima dell'inizio di animazione di transizione |
| pagehide | Innescato sulla pagina "da", dopo l'animazione di transizione completa |
L'esempio seguente mostra come funzionano gli eventi di transizione:
Esempio
$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering
pagetwo
alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){
// When entering pagetwo
alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){
// When leaving pagetwo
alert("pagetwo is now hidden");
}); Prova tu stesso "