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-blok-a e ui-blok-b. Observe:

        
Bloco A

        
Bloco B

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

    
Login



    

        

            Usuário:
            
            Senha:
            
        

        

            
Cancelar

            
Enviar

        

    

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:

			
1-1

			
1-2

			
1-3

			
2-1

			
2-2

			
2-3

			
3-1

			
3-2

			
3-3

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!