Impostare le icone in jQuery Mobile Navbar
In un articolo precedente avevo mostrato come usare Navbar per creare un menu a tab in una pagina con jQuery Mobile.
Oggi vediamo come sia semplice impostare le icone e anche come usare quelle personalizzate piuttosto che quelle standard.
Senza ricominciare da capo, partiamo direttamente da un normale footer con navbar:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#adv">Advertising</a></li>
</ul>
</div>
</div>
Per le icone abbiamo due impostazioni:
- la posizione
- l'icona
Di default la posizione è impostata su TOP, ma possiamo cambiarla così:
<div data-role="navbar" data-iconpos="bottom">
Per impostare l'icona invece:
<li><a href="#home" data-icon="home">Home</a></li>
<li><a href="#adv" data-icon="grid">Advertising</a></li>
Usiamo data-icon indicando un'icona.
Qui la lista di quelle standard.
Se invece vogliamo usarne una personale dobbiamo fare un pò di lavoro in più.
Create un nuovo file CSS e includetelo nell'header.