Bares jQuery Mobile Navigation
Uma barra de navegação é composta por um grupo de links que são alinhados horizontalmente, geralmente dentro de um cabeçalho ou rodapé:
A barra é codificada como uma lista não ordenada de links embrulhado dentro de um <div> elemento que tem o data-role="navbar" atributo:
Exemplo
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Tente você mesmo " Por padrão, as ligações dentro de uma barra de navegação desliga-se automaticamente em um botão (sem necessidade de class="ui-btn" ou data-role="button" ).
Os botões são, por padrão, tão largo quanto seu conteúdo. Use uma lista desordenada de dividir os botões igualmente: 1 botão leva 100% da largura, 2 botões de compartilhar 50% cada, 3 botões de 33,3%, etc. No entanto, se você especificar mais de 5 botões na barra de navegação, que vai envolver a várias linhas (ver "Mais exemplos" abaixo).
Ícones em botões de navegação
Para adicionar um ícone para o seu botão de navegação, utilize o atributo-icon dados:
O ícone de dados atribuem usar os mesmos valores que as classes CSS especificadas no capítulo "Icons". A única diferença é que, em vez de especificar class="ui-icon- value " , você especifica o atributo de data-icon=" value " .
| atributo Valor | Descrição | Ícone |
|---|---|---|
| data-icon="home" | Casa | |
| data-icon="arrow-r" | Seta direita | |
| data-icon="search" | Pesquisa |
Para uma referência completa de todos os ícones de botão jQuery Mobile, por favor, vá ao nosso jQuery Ícones móveis Referência .
Ícones de posicionamento
Assim como com o "ui-btn-icon- position " class (especificado no capítulo "Icons"), você pode escolher onde o ícone deve ser posicionado no botão de navegação: top, right, bottom ou left .
A posição ícone é definido no recipiente navbar - não é possível posicionar cada link botão individual. Use a data-iconpos atributo para especificar a posição:
| atributo Valor | Descrição | Exemplo |
|---|---|---|
| data-iconpos="top" | alinhamento ícone superior | Tente |
| data-iconpos="right" | alinhamento ícone da direita | Tente |
| data-iconpos="bottom" | alinhamento ícone na parte inferior | Tente |
| data-iconpos="left" | alinhamento ícone à esquerda | Tente |
Por padrão, os ícones na botões de navegação são colocados acima do texto (data-iconpos="top") .
ativos Botões
Quando um link na barra de navegação é aproveitado / clicado, ele começa o selecionado (pressionado) olhar.
Para alcançar este olhar sem ter de tocar no link, utilize o class="ui-btn-active" :
Por várias páginas, você pode querer o olhar "selecionado" para cada botão que representa a página que o usuário está ligado. Para fazer isso, adicione o "ui-state-persist" classe para suas ligações, bem como a "ui-btn-active" class:
Exemplo
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
Tente você mesmo " mais Exemplos
Navbars no conteúdo
Como adicionar uma barra de navegação dentro data-role="content" .
Navbars em rodapé
Como adicionar uma barra de navegação dentro do rodapé.
Mais de 5 botões
Uma demonstração de 10 botões em uma barra de navegação