jQuery Mobile aggiunge alcuni nuovi eventi per intercettare situazioni tipiche del mondo mobile o derivate dalla struttura del framework stesso.
Un primo gruppo di eventi che andiamo ad analizzare riguarda la tipica interazione dell'utente con dispositivi mobili con schermo interattivo (touch screen):
| Evento | Descrizione |
|---|---|
| tap | indica il tocco del dito su un elemento della pagina |
| taphold | indica il tocco e mantenimento del dito per circa un secondo su un elemento della pagina |
| swipe | indica il trascinamento del dito sullo schermo orizzontalmente o verticalmente |
| swipeleft | indica il trascinamento verso sinistra del dito sullo schermo |
| swiperight | indica il trascinamento verso destra del dito sullo schermo |
La gestione di questi eventi non è diversa dalla gestione degli eventi ordinari. È possibile associarli agli elementi di una pagina utilizzando i tipici metodi di jQuery.
Ad esempio, la seguente istruzione associa un gestore dell'evento taphold agli elementi di una lista:
$("#messaggi li").bind("taphold", function() {visualizzaMessaggio(this);});Gruppi di eventi
Un altro gruppo di eventi riguarda la navigazione tra le pagine di un'applicazione jQuery Mobile. Il comportamento interno del framework è diverso a seconda che si tratti di pagine interne o esterne, quindi è opportuno aver chiaro il ciclo di vita della pagina in entrambi i casi.
- Nel caso di navigazione di pagine interne, il framework prevede una fase di inizializzazione, durante la quale vengono generati ed potenziati gli elementi contenuti nella pagina, una fase di cambio pagina, durante la quale il framework si prepara a visualizzare la nuova pagina, ed una fase di transizione, che coincide con il momento in cui viene visualizzata la nuova pagina e nascosta quella precedente.
- Nel caso di navigazione di pagine esterne esiste una fase precedente a quelle appena elencate, la fase di caricamento pagina, durante la quale il framework carica la pagina esterna e la inserisce nel DOM della pagina HTML corrente.
Una fase di rimozione pagina prevede l'eliminazione dal DOM della pagina esterna non appena l'utente richiede di navigare verso una pagina diversa.
In corrispondenza a ciascuna di queste fasi del ciclo di vita delle pagine, jQuery Mobile genera alcuni eventi che possono essere intercettati e gestiti per avere un maggior controllo della navigazione.
Eventi per la navigazione tra le pagine
In corrispondenza della fase di caricamento pagina il framework prevede la generazione di tre eventi.
pagebeforeload
È l'evento che si verifica prima del caricamento di una pagina esterna. Al gestore di questo evento vengono passati due argomenti: il primo rappresenta l'evento corrente mentre il secondo è un oggetto che contiene i dati relativi alla pagina da caricare.
Nel caso in cui si intenda gestire con il proprio codice il caricamento della pagina esterna, è essenziale prevenire il comportamento predefinito del framework e farlo proseguire nella catena degli eventi standard subito dopo il caricamento.
Il seguente esempio mostra lo schema di gestione personalizzata del caricamento di una pagina esterna:
$(document).bind("pagebeforeload", function(event, data) {
event.preventDefault();
//istruzioni per il caricamento personalizzato della pagina
data.deferred.resolve(data.absUrl, data.options, page);
});In sostanza, l'istruzione event.preventDefault() inibisce il caricamento standard della pagina da parte del framework, mentre la chiamata finale indica a jQuery Mobile che il caricamento è andato a buon fine e che è possibile proseguire nella generazione degli eventi successivi.
In caso di fallimento del caricamento della pagina esterna l'istruzione conclusiva dovrà essere la seguente:
data.deferred.reject(data.absUrl, data.options);pageload
Questo evento si verifica al termine del caricamento della pagina esterna. Al gestore dell'evento vengono passati due argomenti: l'evento corrente e un oggetto contenente i dati della pagina appena caricata.
pageloadfailed
È l'evento che si verifica in caso di fallimento del caricamento della pagina esterna. Normalmente il framework, dopo la generazione di questo evento, visualizza un messaggio d'errore. È possibile personalizzare la gestione del mancato caricamento disabilitando il comportamento standard e riattivando il proseguimento della catena degli eventi, come abbiamo visto nel caso dell'evento pagebeforeload.
Eventi di inizializzazione della pagina
Come abbiamo già detto, nella fase di inizializzazione, il framework inizializza la pagina, cioè crea il corrispondente oggetto, definisce le proprietà, arricchisce graficamente gli elementi in essa contenuti e predispone tutte le risorse necessarie per una corretta visualizzazione e navigazione. Le volte successive che si naviga verso la medesima pagina, il framework visualizza semplicemente la pagina che era stata inizializzata in precedenza.
E così anche quando si naviga verso un'altra pagina, non viene distrutta la pagina corrente, ma semplicemente nascosta.
In sostanza, l'inizializzazione di una pagina avviene soltanto una sola volta durante l'esecuzione dell'applicazione jQuery Mobile, mentre le successive navigazioni verso la pagina non sono altro che semplici visualizzazioni che coinvolgono le altre fasi del ciclo di vita.
Gli eventi previsti nella fase di inizializzazione sono:
pagebeforecreate
È l'evento che si verifica prima dell'inizializzazione di una pagina; in corrispondenza di questo evento è possibile manipolare il markup della pagina.
pagecreate
Questo evento si verifica subito dopo l'inizializzazione della pagina, quando esso è stata inserita nel DOM ma gli elementi in essa contenuti non sono ancora stati elaborati
pageinit
In corrispondenza di questo evento la pagina è stata inizializzata ed è pronta per la visualizzazione.
Fase di cambio pagina
pagebeforechange
È l'evento che si verifica prima del cambio pagina. Il gestore dell'evento riceve, oltre all'argomento che rappresenta l'evento corrente, un oggetto come secondo argomento che contiene le informazioni sulla pagina verso cui si sta per navigare.
In particolare questo oggetto prevede la proprietà toPage, che indica la pagina di destinazione, e la proprietà options, un oggetto con le opzioni di transizione alla nuova pagina.
pagechange
Questo evento si verifica dopo l'avvenuto cambio di pagina; è importante notare che esso si verifica dopo gli eventi di transizione della pagina che vedremo di seguito.
Il gestore dell'evento riceve gli stessi argomenti previsti per l'evento pagebeforechange.
pagechangefailed
In caso di fallimento del cambio pagina, questo evento offre l'opportunità di gestire la situazione.
Eventi per gestire le transizioni
La fase di transizione gestisce la visibilità della pagina, mostrandola o nascondendola ed eseguendo gli eventuali effetti di animazione richiesti. Gli eventi previsti sono:
pagebeforeshow
Indica l'evento che si verifica prima della visualizzazione della pagina. Il secondo argomento passato al gestore dell'evento è l'oggetto prevPage che rappresenta la pagina di provenienza.
pageshow
È l'evento che si verifica dopo la visualizzazione della pagina; anche in questo caso è disponibile l'oggetto prevPage che indica la pagina di provenienza
pagebeforehide
Si verifica prima che la pagina corrente venga nascosta. Il secondo argomento fornito al gestore dell'evento è l'oggetto nextPage che rappresenta la nuova pagina da visualizzare
pagehide
È l'evento che si verifica quando la pagina corrente è nascosta; anche in questo caso l'oggetto nextPage indica la nuova pagina da visualizzare.
pageremove
Infine, nella fase di rimozione, che ricordiamo riguarda soltanto le pagine esterne, è previsto questo evento. Serve per la verifica prima della effettiva rimozione della pagina. È possibile inibire o personalizzare la rimozione della pagina gestendo l'evento.
Anche in questo caso è necessario disabilitare il comportamento standard del framework invocando il metodo event.preventDefault().
Personalizzare le pagine tramite gli eventi
Come abbiamo avuto modo di vedere, la ricchezza di eventi durante il ciclo di vita di una pagina è tale da consentirci un'ampia gamma di personalizzazioni. Se, ad esempio, vogliamo inserire un piè di pagina personalizzato per tutte le pagine interne della nostra applicazione potremmo gestire l'evento pagebeforecreate come mostrato dal seguente codice:
$("section[data-role='page']").live("pagebeforecreate", function() {
$(this).append("<div><p>Powered by HTML.it</p></div>");
})Un altro gruppi di eventi, infine, intercetta alcune situazioni di interazione con il dispositivo:
scrollstart
indica l'evento di inizio dello scorrimento del contenuto nella pagina
scrollstop
indica la fine dello scorrimento del contenuto nella pagina
orientationchange
indica che l'orientamento del dispositivo è cambiato; l'argomento orientation assume uno dei due valori previsti: portrait o landscape; l'uso di questo evento ha a che vedere con il cosiddetto layout responsivo, che analizzeremo di seguito.
