jQuery barras de ferramentas móveis
elementos da barra de ferramentas são muitas vezes colocados dentro de cabeçalhos e rodapés - para a navegação "fácil acesso":
Barras de cabeçalho
O cabeçalho está localizado no topo da página e, geralmente, contêm uma página de título / logotipo ou um ou dois botões (tipicamente de origem, ou opções de pesquisa).
Você pode adicionar botões à esquerda e / ou para o lado direito no cabeçalho.
O código a seguir, irá adicionar um botão "Home" para a esquerda e um botão "Pesquisar" à direita do texto do título do cabeçalho:
Exemplo
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Tente você mesmo " O código a seguir só irá adicionar um botão para o lado esquerdo do título do cabeçalho:
Exemplo
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Tente você mesmo " O código a seguir só irá adicionar um botão para o lado direito do título do cabeçalho:
Exemplo
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Tente você mesmo " Um cabeçalho pode conter um ou dois botões, enquanto o rodapé não tem limite.
Barras de rodapé
O rodapé está localizado na parte inferior da página.
O rodapé é mais flexível do que o cabeçalho - é mais funcional e mutável ao longo de páginas, e pode, portanto, conter tantos botões, conforme necessário:
Exemplo
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Tente você mesmo " Sugestão: Os botões no rodapé não estão centrados por padrão. Para corrigir isso, basta usar CSS:
Você também pode botões de grupo no rodapé horizontalmente ou verticalmente:
Exemplo
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Tente você mesmo " Posicionamento cabeçalhos e rodapés
O cabeçalho eo rodapé pode ser posicionado de três maneiras:
- Inline - Padrão. Cabeçalhos e rodapés estão em linha com o conteúdo da página
- Fixed - cabeçalhos e rodapés ficará posicionada na parte superior e na parte inferior da página
- Fullscreen - Comporta-se como fixa; cabeçalhos e rodapés ficará posicionada na parte superior e na parte inferior, mas também sobre o conteúdo da página. É também ver através ligeiramente
Use o atributo-position dados para posicionar os cabeçalhos e rodapés:
Inline Posição (Padrão)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Tente você mesmo " Posição fixa
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Tente você mesmo " Para activar a posição de tela cheia, o uso de dados de posição = "fixo" e adicionar o atributo de dados em tela cheia ao elemento:
Posição Fullscreen
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Tente você mesmo " Dica: A posição de tela cheia é ideal para fotos, imagens e vídeos.
Sugestão: Se tocar a tela irá ocultar e mostrar os cabeçalhos e rodapés para as duas posições fixas e em tela cheia.
mais Exemplos
Exibindo apenas o ícone na barra de ferramentas
Usando a ui-btn-icon-notext class para exibir somente o ícone no cabeçalho e rodapé botões.