Criando Layout Grids com jQuery Mobile
Autor: Bruno | Publicado: 2012-01-10T19:27:00-02:00


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 “
” 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-block-a e ui-block-b. Observe:




&lt;div class="ui-grid-a"&gt;
        &lt;div class="ui-block-a"&gt;Bloco Adiv&gt;
        &lt;div class="ui-block-b"&gt;Bloco Bdiv&gt;
div&gt;





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”.

Segue o código: 




&lt;div data-role="page"&gt;
&lt;div data-role="header" data-theme="b"&gt;
    &lt;h1&gt;Loginh1&gt;
div&gt;
&lt;div data-role="content"&gt;
    &lt;form&gt;
        &lt;div data-role="fieldcontain"&gt;
            &lt;label for="name"&gt;Usuário:label&gt;
            &lt;input type="text" name="user" id="user" value=""  /&lt;
            &lt;label for="name"&gt;Senha:label&gt;
            &lt;input type="text" name="pass" id="pass" value=""  /&lt;
        div&gt;
        &lt;fieldset class="ui-grid-a"&gt;
            &lt;div class="ui-block-a"&gt;&lt;button type="submit" data-theme="c"&gt;Cancelarbutton&gt;div&gt;
            &lt;div class="ui-block-b"&gt;&lt;button type="submit" data-theme="b"&gt;Enviarbutton&gt;div&gt;
        fieldset&gt;
    form&gt;
div&gt;
div&gt;





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&nbsp; - Cria três células: 33%/33%/33%
ui-grid-c&nbsp; - 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 3x3, basta 
repetir a sequência de letras dos divs que tem as classes block:




&lt;div class="ui-grid-b"&gt;
            &lt;div class="ui-block-a"&gt;1-1div&gt;
            &lt;div class="ui-block-b"&gt;1-2div&gt;
            &lt;div class="ui-block-c"&gt;1-3div&gt;
            &lt;div class="ui-block-a"&gt;2-1div&gt;
            &lt;div class="ui-block-b"&gt;2-2div&gt;
            &lt;div class="ui-block-c"&gt;2-3div&gt;
            &lt;div class="ui-block-a"&gt;3-1div&gt;
            &lt;div class="ui-block-b"&gt;3-2div&gt;
            &lt;div class="ui-block-c"&gt;3-3div&gt;
div&gt;





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.

Fonte:&nbsp;http://imasters.com.br/artigo/20436/jquery/criando-layout-grids-com-jquery-mobile