Barra di navigazione jQuery Mobile

Barra di navigazione jQuery Mobile

La barra di navigazione è costituita da un gruppo di link disposti in orizzontale, spesso situata all'interno dell'intestazione o del piè di pagina.

Per impostazione predefinita, i link nella barra di navigazione vengono automaticamente convertiti in pulsanti (non è necessario data-role="button").

Usa l'attributo data-role="navbar" per definire la barra di navigazione:

Esempio

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Pagina iniziale</a></li>
      <li><a href="#anylink">Pagina due</a></li>
      <li><a href="#anylink">Ricerca</a></li>
    </ul>
  </div>
</div>

Prova personalmente

Suggerimento:La larghezza del pulsante, per impostazione predefinita, è la stessa del contenuto. Usa liste non ordinate per dividere uniformemente i pulsanti: un pulsante occupa il 100% della larghezza, due pulsanti condividono ciascuno il 50% della larghezza, tre pulsanti il 33.3%, e così via. Tuttavia, se hai definito cinque pulsanti o più nella barra di navigazione, si piegheranno in più righe (vedi "Più esempi" nella parte inferiore della pagina).

Pulsante attivo

Quando un link nella barra di navigazione viene cliccato, ottiene un aspetto selezionato (premuto).

Se desideri ottenere questo aspetto senza cliccare sul link, usa la classe "ui-btn-active":

Esempio

<li><a href="#anylink" class="ui-btn-active">Pagina iniziale</a></li>

Prova personalmente

Per più pagine, potresti dover impostare un aspetto "selezionato" per ogni pulsante per indicare che l'utente sta navigando su quella pagina. Se vuoi farlo, aggiungi la classe "ui-state-persist" e la classe "ui-btn-active" al link:

Esempio

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Pagina iniziale</a></li>

Prova personalmente

Più esempi

Barra di navigazione nel contenuto
Come aggiungere la barra di navigazione in data-role="content".
Barra di navigazione nel piè di pagina
Come aggiungere la barra di navigazione nel piè di pagina.
Posizionare le icone nella barra di navigazione
Come posizionare le icone nella barra di navigazione interna del piè di pagina.
Più di cinque pulsanti
Mostra dieci pulsanti nella barra di navigazione.