Eventi pagina jQuery Mobile

Eventi pagina jQuery Mobile

Gli eventi che si occupano delle pagine in jQuery Mobile vengono divisi in quattro categorie:

  • Inizializzazione della pagina - Prima della creazione della pagina, quando la pagina viene creata e dopo l'inizializzazione della pagina
  • Caricamento/Scaricamento della pagina - Quando la pagina esterna viene caricata, scaricata o incontra un errore
  • Transizione di pagina - Prima e dopo la transizione della pagina
  • Cambio di pagina - Quando la pagina viene modificata o incontra un errore

Per informazioni complete su tutti gli eventi di jQuery Mobile, visitare il nostro Manuale di riferimento degli eventi jQuery Mobile.

Evento di Inizializzazione di jQuery Mobile

Quando una pagina tipica di jQuery Mobile viene inizializzata, essa attraversa tre fasi:

  • Prima della creazione della pagina
  • Creazione della pagina
  • Inizializzazione della pagina

Ogni evento attivato in ogni fase può essere utilizzato per inserire o eseguire codice.

Evento Descrizione
pagebeforecreate L'evento viene attivato quando la pagina sta per essere inizializzata e prima che jQuery Mobile inizi a incrementare la pagina.
pagecreate L'evento viene attivato quando la pagina è stata creata ma prima che l'incremento sia completato.
pageinit L'evento viene attivato quando la pagina è stata inizializzata e jQuery Mobile ha completato l'incremento della pagina.

Di seguito è illustrato quale evento viene attivato quando si crea una pagina in jQuery Mobile:

Esempio

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

Prova tu stesso

Eventi di caricamento jQuery Mobile

Gli eventi di caricamento delle pagine appartengono alle pagine esterne.

Qualsiasi pagina esterna caricata nel DOM attiverà due eventi. Il primo è pagebeforeload, il secondo è pageload (con successo) o pageloadfailed (fallimento).

La tabella seguente spiega questi eventi:

Evento Descrizione
pagebeforeload Attivato prima di qualsiasi richiesta di caricamento della pagina.
pageload Attivato dopo che la pagina è stata caricata con successo ed inserita nel DOM.
pageloadfailed Se la richiesta di caricamento della pagina fallisce, viene attivato questo evento. Per impostazione predefinita, viene visualizzato il messaggio "Error Loading Page".

Di seguito è illustrato il funzionamento degli eventi pageload e pageloadfailed:

Esempio

$(document).on("pageload",function(event,data){
  alert("Evento pageload attivato!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Scusate, la pagina richiesta non esiste.");
});

Prova tu stesso

Eventi di transizione jQuery Mobile

Possiamo anche utilizzare eventi durante la transizione da una pagina all'altra.

La transizione della pagina coinvolge due pagine: una pagina "arrivata" e una pagina "partenza" - queste transizioni rendono il processo di cambio della pagina attiva (la pagina "arrivata") alla nuova pagina (la pagina "partenza") più dinamico.

Evento Descrizione
pagebeforeshow Attivato nella pagina "partenza", prima dell'inizio dell'animazione di transizione.
pageshow Attivato nella pagina "partenza", al completamento dell'animazione di transizione.
pagebeforehide Attivato nella pagina "arrivata", prima dell'inizio dell'animazione di transizione.
pagehide Attivato nella pagina "arrivata", al completamento dell'animazione di transizione.

Di seguito è illustrato il funzionamento del tempo di transizione:

Esempio

$(document).on("pagebeforeshow","#pagetwo",function(){ // Quando si entra nella pagina due
  alert("La pagina due sta per essere visualizzata");
});
$(document).on("pageshow","#pagetwo",function(){ // Quando si entra nella pagina due
  alert("Ora mostra la pagina due");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Quando si lascia la pagina due
  alert("La pagina due sta per essere nascosta");
});
$(document).on("pagehide","#pagetwo",function(){ // Quando si lascia la pagina due
  alert("Ora nasconde la pagina due");
});

Prova tu stesso