Home / Programmazione / Javascript - AJAX / Impostare le icone in jQuery Mobile Navbar
Mattepuffo

Impostare le icone in jQuery Mobile Navbar

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.