Criando Layout Grids com jQuery Mobile

No desenvolvimento de aplicações mobile, temos poucas opções de definição da estrutura dos elementos na tela. Isso acontece porque as telas são pequenas, e como ainda não estamos abordando tablets (o jqm suporta tablets, ainda iremos comentar sobre isso), temos que ser cuidadosos ao diagramar a aplicação.

Por exemplo, não é bom usar divs com posicionamento absoluto ou tabelas “<table>” dentro de uma aplicação mobile. Simplesmente porque não saberemos o seu comportamento nos mais diversos dispositivos.

O jQm tenta minimizar este problema, e um dos seus recursos é a criação de GRIDS, que fazem com que a tela seja dividida em “pedaços” – como se fosse um table mesmo.

O exemplo mais simples é criar uma estrutura com duas colunas, cada uma com 50% da tela. Você terá que criar divs e estabelecer as seguintes classes: ui-grid-a, ui-blok-a e ui-blok-b. Observe:

<div class="ui-grid-a">
        <div class="ui-block-a">Bloco A</div>
        <div class="ui-block-b">Bloco B</div>
</div>

Criamos uma div, com a class ui-grid-a. Depois, criamos mais duas divs internas, com classes ui-block-a e ui-block-b. Os textos “Bloco A” e “Bloco B”. Com isso, temos o seguinte layout:

Observe que dividimos os dois blocos A e B e duas células com 50% de largura cada uma. Uma boa aplicação para este exemplo seria a criação de dois botões de formulário: “Cancelar” e “Ok”.

<div data-role="page">
<div data-role="header" data-theme="b">
    <h1>Login</h1>
</div>
<div data-role="content">
    <form>
        <div data-role="fieldcontain">
            <label for="name">Usuário:</label>
            <input type="text" name="user" id="user" value=""  />
            <label for="name">Senha:</label>
            <input type="text" name="pass" id="pass" value=""  />
        </div>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><button type="submit" data-theme="c">Cancelar</button></div>
            <div class="ui-block-b"><button type="submit" data-theme="b">Enviar</button></div>
        </fieldset>
    </form>
</div>
</div>

O exemplo acima produz o seguinte resultado:

Você deve ter percebido que a primeira div, que contém o sistema de grids do jQm, contém a seguinte classe: ui-grid-a A letra “a” neste grid tem o propósito de criar duas células com 50% de largura. Para outros tipos, temos:

• ui-grid-b  – Cria três células: 33%/33%/33%
• ui-grid-c  – Cria quatro células: 25%/25%/25%/25%
• ui-grid-d – Cria cinco células: 20%/20%/20%/20%/20%

Se você precisar criar múltiplas células, por exemplo 3×3, basta repetir a sequência de letras dos divs que tem as classes block:

<div class="ui-grid-b">
			<div class="ui-block-a">1-1</div>
			<div class="ui-block-b">1-2</div>
			<div class="ui-block-c">1-3</div>
			<div class="ui-block-a">2-1</div>
			<div class="ui-block-b">2-2</div>
			<div class="ui-block-c">2-3</div>
			<div class="ui-block-a">3-1</div>
			<div class="ui-block-b">3-2</div>
			<div class="ui-block-c">3-3</div>
</div>

E conseguirá o seguinte resultado:

Repare que, nas divs das células, usamos a,b,c,a,b,c,a,b,c … fazendo com que o jQm quebre corretamente cada célula.

É isso. Até a próxima!