Grade do jQuery Mobile

Grade de layout da grade do jQuery Mobile

jQuery Mobile oferece um conjunto de soluções de layout de coluna baseadas em CSS. No entanto, geralmente não é recomendado usar o layout de coluna em dispositivos móveis, devido à limitação da largura da tela dos dispositivos móveis.

Mas às vezes você precisa posicionar elementos menores, como botões ou barras de navegação, como em uma tabela, lado a lado. Nesse caso, o layout de coluna é adequado.

As colunas na grade são de largura igual (largura total é 100%), sem borda, fundo, margem externa ou interna.

Existem quatro tipos de grades de layout disponíveis:

Classe da grade Coluna Largura da coluna Correspondente Exemplo
ui-grid-a 2 50% / 50% ui-block-a|b Teste
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Teste
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Teste
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Teste

Dica:No contêiner de coluna, dependendo do número de colunas, os elementos filhos podem ser configurados com as classes ui-block-a|b|c|d|e. Essas colunas flutuarão lado a lado em ordem.

Exemplo 1: Para a classe ui-grid-a (layout de duas colunas), você deve especificar dois elementos filhos ui-block-a e ui-block-b.

Exemplo 2: Para a classe ui-grid-b (layout de três colunas), adicione três elementos filhos ui-block-a, ui-block-b e ui-block-c.

Personalização da grade

Você pode personalizar os blocos das colunas usando CSS:

Exemplo

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Experimente Você Mesmo

Você também pode personalizar os blocos usando estilos inline:

<div class="ui-block-a" style="border: 1px solid black;"><span>Texto..</span></div>

Linhas múltiplas

Também é possível incluir várias linhas em uma coluna.

Observação:ui-block-a-class sempre criará uma nova linha:

Exemplo

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Algum Texto</span></div>
  <div class="ui-block-b"><span>Algum Texto</span></div>
  <div class="ui-block-c"><span>Algum Texto</span></div>
  <div class="ui-block-a"><span>Algum Texto</span></div>
  <div class="ui-block-b"><span>Algum Texto</span></div>
  <div class="ui-block-a"><span>Algum Texto</span></div>
</div>

Experimente Você Mesmo