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.

Dentro metteteci una cosa del genere:

.nav-myicon .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}

.nav-myicon .ui-btn .ui-icon {
width: 30px !important;
height: 30px !important;
margin-left: -15px !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius: none !important;
border-radius: none !important;
}

#h .ui-icon {
background: url(http://www.sito.it/app/icons/home.png) 50% 50% no-repeat;
background-size: 25px 25px;
}

#a .ui-icon {
background: url(http://www.sito.it/app/icons/pdv.png) 50% 50% no-repeat;
background-size: 25px 25px;
}

Prima abbiamo impostato alcune regole generali.

Sotto richiamiamo gli id di quelli con l'icona personalizzata.

Il footer cambierà in questa maniera:

<div data-role="footer" data-position="fixed" class="nav-myicon">
<div data-role="navbar" class="nav-myicon" data-grid="d">
<ul>
<li><a href="#home" id="h" data-icon="custom"></a></li>
<li><a href="#adv" id="a" data-icon="custom"></a></li>
</ul>
</div>
</div>

Abbiamo aggiunto alcune classi al footer e alla navbar.

Poi gli id ai link e impostato data-icon su custom.

Infine, io, ho anche levato il nome dei link per lasciare solo le icone, ma non è obbligatorio ovviamente.

Come background-size dovete dargli la dimensione dell'icona.

La cosa importante da notare è che come percorso dell'immagine dovete dargli quello assoluto; dandogli quello relativo a me non ha funzionato.