TICS EN EDUCACION

Las vistas de lista en jQuery Mobile son listas HTML estándar;

ordenado (<ol>) y

desordenado (<ul>).

Para crear una lista, aplique data-role = "listview" al elemento <ol> o <ul>. Para hacer que los elementos sean intercambiables, especifique un enlace dentro de cada elemento de la lista (<li>).

Para diseñar sus listas con esquinas redondeadas y un margen, use el atributo data-inset = "true".

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>

</head>

<body>

 <div data-role="page" id="pageone">

  <div data-role="main" class="ui-content">

   <h2>Lista estandar:</h2>

   <ul data-role="listview">

    <li><a href="#">Elemento de la lista 1</a></li>

    <li><a href="#">Elemento de la lista 2</a></li>

    <li><a href="#">Elemento de la lista 3</a></li>

   </ul><br>

   <h2>Lista con data-inset="true":</h2>

   <ul data-role="listview" data-inset="true">

    <li><a href="#">Elemento de la lista 1</a></li>

    <li><a href="#">Elemento de la lista 2</a></li>

    <li><a href="#">Elemento de la lista 3</a></li>

   </ul>

  </div>

 </div> 

</body>

</html>

Resultado:

Nota: De forma predeterminada, los enlaces dentro de un elemento de la lista se convertirán automáticamente en un botón (no es necesario poner ui-class = "btn" o data-role = "button").

Divisor de Lista

Los divisores de lista se utilizan para organizar y agrupar elementos en categorías / secciones.

Para especificar un divisor de lista, agregue el atributo data-role = "list-divider" a un elemento <li>.

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>

</head>

<body>

 <div data-role="page" id="pageone">

  <div data-role="main" class="ui-content">

   <h2>Divisores de Lista</h2>

   <ul data-role="listview" data-inset="true">

    <li data-role="list-divider">Europa</li>

    <li><a href="#">Norway</a></li>

    <li><a href="#">Germany</a></li>

    <li data-role="list-divider">Asia</li>

    <li><a href="#">India</a></li>

    <li><a href="#">Thailand</a></li>

    <li data-role="list-divider">Africa</li>

    <li><a href="#">Zimbabwe</a></li>

    <li><a href="#">Uganda</a></li>

   </ul>

  </div>

 </div> 

</body>

</html>

Resultado:

Si tiene una lista alfabética, (por ejemplo, una guía telefónica) jQuery Mobile agrega automáticamente los divisores apropiados al establecer el atributo
data-autodividers = "true" en el elemento <ol> o <ul>:
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>

</head>

<body>

 <div data-role="page" id="pageone">

  <div data-role="main" class="ui-content">

   <h2>My Directorio</h2>

   <ul data-role="listview" data-autodividers="true" data-inset="true">

    <li><a href="#">Adele</a></li>

    <li><a href="#">Agnes</a></li>

    <li><a href="#">Albert</a></li>

    <li><a href="#">Billy</a></li>

    <li><a href="#">Bob</a></li>

    <li><a href="#">Calvin</a></li>

    <li><a href="#">Cameron</a></li>

    <li><a href="#">Chloe</a></li>

    <li><a href="#">Christina</a></li>

    <li><a href="#">Diana</a></li>

    <li><a href="#">Gabriel</a></li>

    <li><a href="#">Glen</a></li>

    <li><a href="#">Ralph</a></li>

    <li><a href="#">Valarie</a></li>

   </ul>

   <p>The data-autodividers="true" attribute creates dividers where it is appropriate with uppercased first letters of the item's text.</p>

  </div>
 </div>

</body>

</html>

Resultado:

Nota: El atributo data-autodividers = "true" crea divisores con las primeras letras en mayúsculas del texto del elemento.

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

Dentro del contenedor de columnas, los elementos secundarios pueden tener la clase ui-block-a | b | c | d | e, dependiendo del número de columnas. Las columnas flotarán lado a lado.

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>

     <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:

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>

Resultado:

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:

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

miércoles, 1 de mayo de 2019

34.- List Views (JQuery Mobile)

Divisor de Lista

33.- Grids (JQuery Mobile)

Personalizar Grids

Filas múltiples

Grid Responsivos