miércoles, 17 de julio de 2013

Grids - Bloques estructurados con Jquery Mobile



En esta ocasión veremos como crear grids con Jquery Mobile, con este componente se pueden crear bloques horizontales que se adaptan perfectamente a la resolución de cualquier dispositivo, se maneja a través de clases como veremos a continuación ... 

La clase principal ui-grid-[letra de la "a" a la "e"]. Cada una de las letras indica el nivel de comprimido para el Grid, cuanto mayor es la letra más se comprimen los bloques del grid. 

 Otra clase es ui-block-[aumentar la letra por cada nuevo bloque]. Para poder formar el grid horizontalmente esta clase es fundamental, de lo contrario se posicionarán verticalmente. 

Y la otra clase es ui-bar-[letra para aplicar el estilo]. Esta letra determina el estilo del bloque, es como data-theme en el cual indicas la letra que aplicará el estilo. 


<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:30px">Bloque 1</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:30px">Bloque 2</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:30px">Bloque 3</div></div>
</div>

Jquery Mobile