Le barre di navigazione ricoprono un'importanza fondamentale nelle interfacce mobile, in quanto rappresentano dei chiari punti di interazione per passare da una pagina all'altra.
jQuery Mobile offre un'ampia gamma di opzioni per realizzare barre e menu eprsonalizzate secondo le necessità della vostra applicazione
Barre di navigazione semplici
Durante le lezioni precedenti abbiamo già introdotto le due barre di default di una pagina: l'header ed il footer.
Nella loro configurazione di base queste barre seguono lo scorrere della pagina (cioè sono inline); così, nel caso il testo eccedesse lo schermo, il footer verrebbe visualizzato solo scrollando verso il basso.
Barre fisse
In realtà è possibile configurare footer ed header in modo che restino fissi nella pagina aggiungendo agli elementi l'attributo data-position="fixed". In questo modo la barra impostata come fixed scomparirà quando inizieremo a trascinare la pagina, per poi riapparire nella posizione corretta.
Poiché molti browser mobile (ad eccezione di Mobile Safari per iOS 5) non supportano la regola css positin: fixed, questo effetto è realizzato esclusivamente in JavaScript e tende ad essere abbastanza esoso in termini di risorse. Se non ne necessitate assolutamente, è consigliabile evitarlo.
Detto questo, per la nostra applicazione necessitiamo di un'esperienza utente che ricalchi il più possibile quella di un'app nativa, quindi applicheremo su header e footer il posizionamento fisso, ecco il risultato.
Modalità fullscreen
Un'altra modalità disponibile è quella fullscreen, che ricrea l'esperienza tipica di molte gallerie immagini native nelle quali le barre di navigazione vengono mostrate o nascoste alternativamente quando l'utente clicca sulla pagina.
In questo caso il vantaggio è che lo spazio utile per visualizzare il contenuto si allarga a tutto lo schermo, mentre lo svontaggio è che il contenuto iniziale e finale della pagina potrebbe essere nascosto dalle barre.
Per abilitare questa modalità è necessario impostare le barre su data-position="fixed" ed aggiungere all'elemento con data-role="page" il flag data-fullscreen="true":
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>Barra Header Fissa</h1>
</div>
<div data-role="content">
<!-- qui il contenuto -->
</div>
<div data-role="footer" data-position="fixed">
<h4>Barra Footer Fissa</h4
</div>
</div>Footer persistenti
Come avrete già avuto modo di notare nel progetto di esempio, ad ogni cambio di pagina header e footer sono coinvolti nell'animazione di tutta la pagina.
Questo comportamento è corretto nella maggior parte dei casi, in quanto contestualizza le due barre nell'insieme del contenuto, tuttavia in alcune applicazioni potrebbe essere necessario identificare il footer come un controllo universale ed indipendente dai contenuti delle varie pagine.
Per ottenere questo risultato basta impostare il footer come fisso (con data-position="fixed"), aggiungere un attributo data-id univoco alla barra e ricopiarlo su tutte le occorrenze della stessa barra nelle altre pagine:
<div data-role="footer" data-position="fixed" data-id="footerPersistente">
<h4>Barra Footer Fissa e Persistente</h4>
</div>