Barra de Ferramentas do jQuery Mobile

Barra de Ferramentas do jQuery Mobile

Elementos da barra de ferramentas são frequentemente colocados no cabeçalho e no rodapé - para implementar a navegação "já visitado":

Barra de título

O cabeçalho geralmente contém o título do cabeçalho/LOGO ou um a dois botões (geralmente botão de página inicial, opções ou procurar).

Você pode adicionar botões ao lado esquerdo ou ao lado direito do cabeçalho.

O código abaixo adicionará um botão ao lado esquerdo do texto do título do cabeçalho e um botão ao lado direito:

Exemplo

<div data-role="header">
  <a href="#" data-role="button">Página inicial</a>
  <h1>Bem-vindo ao meu site</h1>
  <a href="#" data-role="button">Procurar</a>
</div>

Experimente você mesmo

O código abaixo adicionará um botão ao lado esquerdo do título do cabeçalho:

<div data-role="header">
  <a href="#" data-role="button">Página inicial</a>
  <h1>Bem-vindo ao meu site</h1>
</div>

No entanto, se você coloca um link de botão após o elemento <h1>, ele não será exibido ao lado direito do texto. Para adicionar um botão ao lado direito do título do cabeçalho, especifique o nome da classe "ui-btn-right":

Exemplo

<div data-role="header">
  <h1>Bem-vindo ao meu site</h1>
  <a href="#" data-role="button" class="ui-btn-right">Procurar</a>
</div>

Experimente você mesmo

Dica:O cabeçalho pode conter um ou dois botões, mas o rodapé não tem limites.

Barra de rodapé

Em comparação com o cabeçalho, o rodapé é mais flexível - ele é mais prático e variável, portanto, pode conter a quantidade necessária de botões:

Exemplo

<div data-role="footer">
  <a href="#" data-role="button">Transmitir para o Weibo do Sina</a>
  <a href="#" data-role="button">Transmitir para o Weibo do Tencent</a>
  <a href="#" data-role="button">Transmitir para o Espaço QQ</a>
</div>

Experimente você mesmo

Notas:O estilo do rodapé é diferente do cabeçalho (ele remove alguns espaços internos e brancos e os botões não ficam centralizados). Para corrigir esse problema, defina o nome da classe do rodapé como "ui-btn":

Exemplo

<div data-role="footer" class="ui-btn">

Experimente você mesmo

Você também pode escolher combinar os botões horizontal ou verticalmente no rodapé:

Exemplo

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Transmitir para o Weibo do Sina</a>
    <a href="#" data-role="button" data-icon="plus">Transmitir para o Weibo do Tencent</a>
    <a href="#" data-role="button" data-icon="plus">Transmitir para o Espaço QQ</a>
  </div>
</div>

Experimente você mesmo

Localizar cabeçalho e rodapé

Existem três maneiras de posicionar o cabeçalho e o rodapé:

  • Inline - Padrão. O cabeçalho e o rodapé ficam na linha do conteúdo da página.
  • Fixed - A página e o rodapé ficam na parte superior e inferior da página.
  • Tela cheia - Semelhante ao fixed; a página e o rodapé ficam na parte superior e inferior da página, mas também sobre o conteúdo da página. É também ligeiramente transparente

Use a propriedade data-position para localizar a cabeçalho e o rodapé:

Localização em linha (padrão)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Experimente você mesmo

Localização fixa

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Experimente você mesmo

Se precisar ativar a localização completa, use data-position="fixed" e adicione a propriedade data-fullscreen ao elemento:

Tela cheia de localização

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Experimente você mesmo

Dica:Fullscreen é ideal para fotos, imagens e vídeos.

Dica:Para positioning fixed e fullscreen, o toque na tela ocultará e mostrará a cabeça e os pés de página.