Nelle lezioni precedent abbiamo introdotto un bottone di back nell'header utilizzando il seguente codice:
<a href="index.html" data-rel="back">back</a>In realtà è possibile personalizzare ulteriormente le barre agguingendo diversi bottoni. In questo modo potremo tenere collegamenti importanti (come l'homepage) in primo piano.
Aggiungere bottoni e menu
Il markup necessario per aggiungere bottoni è differente per header e footer, ma comunque si risolve con l'aggiunta di alcuni attributi data-* agli elementi.
Bottoni nell'header
Nel caso dell'header, per aggiungere un bottone dovremo impostare l'elemento come inline (avevamo visto questo attributo nei bottoni). Ogni elemento a con attributo data-icon impostato verrà visualizzato come un bottone:
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="arrow-l">Indietro</a>
<h1>Titolo header</h1>
<a href="index.html" data-icon="arrow-r">Avanti</a>
</div>In questo esempio i bottoni saranno posizionati a sinistra e destra del testo contenuto nel tag h1. Per modificare questo comportamento basterà aggiungere all'elemento la classe ui-btn-right o ui-btn-left per spostare a destra o sinistra il bottone.
Bottoni nel footer
Poiché la struttura del footer è tendenzialmente più libera e pensata per accogliere tanto contenuti quanto menu di navigazione e altri tipi di controlli, jQuery Mobile non è invasiva nel rendering degli elementi figli quanto lo è per l'header. In questo senso sarà necessario aggiungere un po' più di markup e di attributi per aggiungere dei bottoni al footer.
Anzitutto aggiungeremo una classe ui-bar al footer per aggiungere del padding interno in modo da distanziare i bottoni dai bordi dello schermo, quindi inseriremo i bottoni con il markup visto nelle lezioni rpecedenti:
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button">Bottone</a>
<a href="index.html" data-role="button" data-icon="delete">Bottone con Icona</a>
</div>Barre di navigazione
Header e footer sono due particolari tipi di barre di navigazione e spesso rappresentano le uniche due barre di una pagina. Tuttavia, vi sono dei casi in cui la complessità dell'applicazione necessita di ulteriori controlli per strutturare la navigazione interna.
In questi casi è possibile realizzare in modo molto semplice delle barre orizzontali aggiuntive a partire da una lista puntata ed una serie di collegamenti. Ecco il markup di base:
<div data-role="navbar">
<ul>
<li><a href="pagina1.html">Pagina 1</a></li>
<li><a href="pagina2.html">Pagina 2</a></li>
</ul>
</div>La chiave per la realizzazione di una barra di contenuto sta nel racchiudere la lista puntata in un elemento con attributo data-role="navbar".
Per quanto riguarda i link contenuti nella barra, essi si divideranno equamente la larghezza della pagina(nell'esempio precedente ne occuperanno ognuno il 50%). Tale comportamento supporta al massimo 5 elementi, dopodiché i link vengono accodati in una nuova riga.
Usare le icone
Come per i bottoni, è possibile affiancare un'icona ai singoli link di una barra di navigazione aggiungendo al tag a un attributo data-icon="nome-icona", con l'unica differenza che l'immagine verrà posizionata sopra al testo. Per modificare tale posizionamento di default basterà aggiungere al contenitore un attributo data-iconpos con valore bottom, right o left.
Come e perché usare le barre di navigazione
Alla luce di queste nuove funzionalità, è bene tenere presente la differenza semantica di header, footer e barre di navigazione. Nel caso della nostra applicazione di esempio potremmo pensare di sostituire i tre bottoni della pagina about con una barra di navigazione superiore posizionata appena sotto all'header.
Il risultato finale ricorderà molto da vicino un sottomenu e renderà la navigazione e l'orientamento generale dell'utente più intuitivo.
