Nella lezione precedente abbiamo visto come realizzare una pagina di base per il nostro progetto. Una volta che avremo realizzato alcune pagine (fra le quali quella dei credits) dovremo gestirne la navigazione interna.
Navigazione interna
In jQuery Mobile la navigazione fra le pagine viene realizzata con semplici link, come faremmo in un tradizionale sito web :
<a href="credits.html" title="credits">credits</a>La differenza sostanziale sta nel fatto che, dove possibile, il contenuto collegato verrà caricato con una
chiamata asincrona ed accodato al documento. In questo modo la transizione fra una pagina
e l'altra sarà più fluida.
È giusto sottolineare che tale comportamento si applica solo ai link interni al sito, mentre tutti quelli con
un attributo target o con rel="external" verranno raggiunti con una classica chiamata sincrona.
Infine, nel caso in cui volessimo forzare il caricamento sincrono di una pagina interna al sito, potremo
impostare data-ajax="false" come attributo del link.
<a href="tech-spec.html" title="credits" data-ajax="false">caratteristiche tecniche</a>Ecco la versione aggiornata dalla nostra applicazione.
Template multi-pagina
Sebbene il caricamento asincrono delle pagine renda la navigazione più fluida, il metodo più efficace per garantire
una navigazione senza intoppi è quello di contenere più pagine nello stesso file. In jQuery Mobile questo è possibile inserendo più tag con data-role="page" in uno stesso documento e dando ad ognuno un identificativo univoco:
<div data-role="page" id="identificativo_pagina">
<!-- contenuto della prima pagina -->
</div>
<div data-role="page" id="identificativo_pagina_2">
<!-- contenuto della seconda pagina -->
</div>Navigazione in un template multi-pagina
In questo tipo di template multi-pagina, la navigazione interna è realizzata considerando ogni pagina come un'ancora:
<a href="#identificativo_pagina_2">Link alla seconda pagina</a>Il vantaggio di questo tipo di template rispetto a quello a pagina singola, sta nella maggior responsività legata
al fatto di aver già caricato più pagine in un'unica chiamata.
Nel nostro caso, possiamo usare questa funzionalità per realizzare una sezione About
contenente pagine di cortesia.
È importante sottolineare che, almeno nella versione 1.0RC1, non è possibile il deep linking delle pagine.
In altre parole un link del tipo:
<a href="mia-pagina.html#sottopagina">clicca qui</a>non funzionerebbe, anzi jQuery Mobile finirebbe per ricercare una pagina con id sottopagina fra quelle già caricate.
Per evitare qualsiasi problema è sempre consigliabile collegare pagine con template multi-pagina in modo sincrono:
<a href="about.html" data-ajax="false">a proposito di Music Manager</a>Tornare indietro
Secondo numerose statistiche, il controllo più utilizzato per la navigazione di un sito web è il pulsante indietro
del browser. jQuery Mobile offre la possibilità di implementare facilmente tale funzionalità nell'interfaccia della nostra applicazione aggiungendo ad un link data-rel="back".
Basandoci su un design pattern diffuso a partire dalle applicazioni per iPhone, inseriremo un link back direttamente nell'header di tutte le pagine (eccettuata l'homepage):
<div data-role="header">
<a href="index.html" data-rel="back">back</a>
<h1>About</h1>
</div><!-- /header -->È da notare che, poiché questa caratteristica richiede una funzionalità avanzata del browser, abbiamo dovuto specificare un attributo href valido per offrire un'alternativa nei browser di grado C.
