Barra de Navegação do jQuery Mobile

Barra de Navegação do jQuery Mobile

A barra de navegação é composta por um grupo de links dispostos horizontalmente, geralmente localizados dentro do cabeçalho ou rodapé da página.

Por padrão, os links na barra de navegação são automaticamente convertidos em botões (não é necessário data-role="button").

Use a propriedade data-role="navbar" para definir a barra de navegação:

exemplo

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Página inicial</a></li>
      <li><a href="#anylink">Página dois</a></li>
      <li><a href="#anylink">Pesquisa</a></li>
    </ul>
  </div>
</div>

Experimente você mesmo

Dica:A largura do botão, por padrão, é consistente com o conteúdo. Use listas não ordenadas para dividir uniformemente os botões: um botão ocupa 100% da largura, dois botões compartilham 50% de largura cada, três botões 33.3%, e assim por diante. No entanto, se você definir cinco ou mais botões na barra de navegação, eles se dobrarão em várias linhas (veja o exemplo na parte inferior da página "Mais exemplos").

Botão ativo

Quando um link no menu de navegação é clicado, ele ganha o estilo de seleção (pressionado).

Se desejar implementar este estilo sem clicar no link, use a classe "ui-btn-active":

exemplo

<li><a href="#anylink" class="ui-btn-active">Página Inicial</a></li>

Experimente você mesmo

Para múltiplas páginas, você pode precisar configurar o estilo "selecionado" para cada botão para indicar que o usuário está navegando na página. Se fizer isso, adicione a classe "ui-state-persist" ao link, bem como a classe "ui-btn-active":

exemplo

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Página Inicial</a></li>

Experimente você mesmo

Mais exemplos

Barra de navegação no conteúdo
Como adicionar uma barra de navegação dentro de data-role="content".
Barra de navegação no rodapé
Como adicionar uma barra de navegação no rodapé.
Localizar ícones na barra de navegação
Como colocar ícones dentro da barra de navegação do rodapé.
Cinco ou mais botões
Demonstra dez botões na barra de navegação.