jQuery Mobile proporciona un conjunto de diseños de columnas basados en CSS. Sin embargo, los diseños de columnas generalmente no se recomiendan en un dispositivo móvil, debido al ancho de la pantalla del dispositivo móvil.
Pero hay ocasiones en las que desea colocar elementos más pequeños, como botones o pestañas de navegación, lado a lado como si estuviera en una tabla. Entonces, las columnas son perfectas.
Las columnas de una cuadrícula tienen el mismo ancho (y 100% de ancho en total), sin bordes, fondo, margen o relleno.
Hay cinco cuadrículas de diseño que se pueden utilizar.
| Grid Class | Columns | Column Widths | Corresponds To |
|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e |
Ejemplo 1: Para la clase ui-grid-a (que es un diseño de dos columnas), debe especificar dos elementos secundarios de ui-block-a y ui-block-b.
Ejemplo 2: Para ui-grid-b (diseño de tres columnas), agregue tres elementos secundarios de ui-block-a, ui-block-b y ui-block-c.
Ejemplo: ui-grid-a de 2 columnas con ui-block-a|b
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone" data-theme="b">
<div data-role="header">
<h1>Manejo de Columnas</h1>
</div>
<div data-role="main" class="ui-content">
<p>Diseño de dos columnas:</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow">Botón de primera columna</a>
<br>
<br>
<span>Primera Columna: Este es un texto. Este es un texto Este es un texto Este es un texto Este es un texto.</span>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow">Botón de segunda columna</a> <br>
<span>Segunda Columna: Este es un texto. Este es un texto Este es un texto Este es un texto Este es un texto.</span>
</div>
</div>
</div>
</div>
</body>
</html>
Resultado:
Personalizar Grids
Puedes personalizar tus bloques de columnas usando CSS.
Agregue en el <head> el estilo
<style>
.ui-block-a, .ui-block-b{
background-color: rgb(161, 238, 228);
border: 1px solid rgb(95, 168, 216);
height: 300px;
font-weight: bold;
text-align: center;
padding: 15px;
}
</style>
Resultado:
Filas múltiples
También es posible tener varias filas dentro de sus columnas.
Nota: el ui-block-a class siempre creará una nueva línea:
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-c"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
</div>
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-c"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
<div class="ui-block-b"><span>Some Text</span></div>
<div class="ui-block-a"><span>Some Text</span></div>
</div>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-block-a, .ui-block-b, .ui-block-c{
background-color: rgb(161, 238, 228);
border: 1px solid rgb(95, 168, 216);
height: 100px;
font-weight: bold;
text-align: center;
padding: 15px;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Multiples Filas</h1>
</div>
<div data-role="main" class="ui-content">
<p>Diseño de 3 columnas:</p>
<div class="ui-grid-b">
<div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span> </div>
<div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span> </div>
<div class="ui-block-c" style="border:1px solid black;"><span>Some Text</span> </div>
</div>
<p>Diseño de 3 columnas con multiples filass:</p>
<div class="ui-grid-b">
<div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span> </div>
<div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span> </div>
<div class="ui-block-c" style="border:1px solid black;"><span>Some Text</span> </div>
<div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span> </div>
<div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span> </div>
<div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span> </div>
</div>
</div>
</div>
</body>
</html>
Grid Responsivos
En pantallas pequeñas, no se recomienda tener demasiados botones con el texto lado a lado en una fila, ya que el texto podría acortarse.
Para las cuadrículas responsivas, agregue la clase ui-responsive al contenedor.
Agregue lo siguiente:
<div class="ui-grid-b ui-responsive">
Resultado:(Antes de redimensionar ventana)
Después de redimensionar (Solo se uso class="ui-grid-b ui-responsive" en el primer diseño de 3 columnas ) notar como al no dar en la fila se apilaron.
Aquí se observa mejor al redimensionar como se distorciona el segundo bloque que no es responsivo
uffffffffffffff
No hay comentarios:
Publicar un comentario