jquery mobile tutorial

24/05/2012

Desarrollo de aplicaciones móviles con móviles con

MSc. Wellington Villota

Lección: jQuery ‐ Listas

• • • • • • • • •

Definición Listas con recuadro Listas interactivas Listas anidadas Divisores de listas Listas con botones dobles Imágenes Contador de burbujas Laboratorios wvillota@espol.edu.ec

Listas – 1/3 – Las listas son un componente de interfaz de usuario muy popular porque hacen que la experiencia en la navegación sea simple y eficiente.

– jQuery móvil puede generar listas con formato visual que son muy similares a los estilos visto en las aplicaciones nativas.

– jQuery Móvil puede mejorar la lista ya sea ordenada o desordenada. Sólo se aplican data‐role = “listview" a una lista, y jQuery Móvil se encargará del resto. <h3>Unordered List</h3> <ul data‐role="listview"> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <h3>Ordered List</h3> <ol data‐role="listview"> <li>Item</li> <li>Item</li> <li>Item</li> </ol>

wvillota@espol.edu.ec

1

24/05/2012

Listas – 2/3

Vista de una lista básica

wvillota@espol.edu.ec

Demostración 23 – 3/3  Uso de listas <div data‐role="content"> <h2 align="center">Cursos</h2> <ul data‐role="listview"> <li>jQuery Mobile <li>Dreamweaver <li>Fireworks <li>jQuery </ul> <h2 align="center">Cursos</h2> <ol data‐role="listview"> <li>jQuery Mobile <li>Dreamweaver <li>Fireworks <li>jQuery </ol> </div> wvillota@espol.edu.ec

Listas página completa Vs listas recuadro – 1/3

– Por defecto, las listas están en un modo de página completa. Eso significa que el contenido de la lista cubre toda la página, como se muestra a continuación:

wvillota@espol.edu.ec

2

24/05/2012

Listas con recuadro – 2/3

– En una “lista con recuadro” no aparecerá el recuadro de borde a borde. En su lugar, una lista de inserción que se ajusta automáticamente dentro de un bloque con esquinas redondeadas y tiene márgenes establecidos para el espacio adicional.

– Permite tener contenido antes y después.

– Para definirlas, sólo tiene que añadir los data‐inset= "true" a los elementos UL como OL. <ol data‐role="listview" data‐inset="true"> <!‐‐ item rows ‐‐> </ol>

wvillota@espol.edu.ec

Demostración 24 – 3/3  Uso de listas con recuadros <div data‐role="content"> <h2 align="center">Cursos</h2> <ul data‐role="listview“ data‐inset="true" > <li>jQuery Mobile <li>Dreamweaver <li>Fireworks <li>jQuery </ul> <h2 align="center">Cursos</h2> <ol data‐role="listview“ data‐inset="true" > <li>jQuery Mobile <li>Dreamweaver <li>Fireworks <li>jQuery </ol> </div> wvillota@espol.edu.ec

Listas Interactivas – 1/4 – De forma predeterminada, los elementos de vista de lista no tienen propiedades interactivas.

– Un uso común es hacer que los elementos de la lista serán botones de hacer tapping.

– Para hacer esto con jQuery Mobile, usted tiene que incluir las etiquetas de anclaje en el elemento de la lista. <h3>Unordered List</h3> <ul data‐role="listview"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> <h3>Ordered List</h3> <ol data‐role="listview"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ol>

wvillota@espol.edu.ec

3

24/05/2012

Listas Interactivas – 2/4

Vista de lista con botones wvillota@espol.edu.ec

Demostración 25 – 3/4  Uso de listas interactivas <div data‐role="content"> <h3>Unordered List</h3> <ul data‐role="listview"> <li><a href="#it1">Item <li><a href= #it1 >Item 1</a></li> 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> <h3>Ordered List</h3> <ol data‐role="listview"> <li><a href="#it1">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ol> </div>

wvillota@espol.edu.ec

Demostración 25 – 4/4  Uso de listas interactivas <div data‐role="page" id="it1" data‐add‐back‐btn="true"> <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>List.Interactivas</h1> </div> <div data‐role="content"> <h2 align="center">ITEM 1</h2> <p>Un framework de interfaz de usuario multi‐ plataforma que permite crear webapps y Apps para teléfonos y tabletas táctiles.</p> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4> </div> </div>

wvillota@espol.edu.ec

4

24/05/2012

Laboratorio 7 – 1/2  Uso de listas interactivas

wvillota@espol.edu.ec

Laboratorio 7 – 2/2  Uso de listas interactivas

• •

El trabajo será calificado y es individual.

Tiempo: 30 minutos para realizar el trabajo.

wvillota@espol.edu.ec

Listas Anidadas – 1/3 – jQuery Mobile permite crear listas anidadas y producir vistas interactivas en las que el usuario puede profundizar tocando en elementos individuales.

– La primera vista constará de los elementos de la lista de nivel superior, y ád l l d l l d l tocando en uno de esos artículos, se visualizará la sub‐lista, y así sucesivamente.

wvillota@espol.edu.ec

5

24/05/2012

Demostración 26 – 2/3  Uso de listas anidadas <div data‐role="content"> <h3 align="center">Pike+</h3> <ul data‐role="listview"> <li>Postres <ul> <li>Postre 1</li> <li>Postre 2</li> <li>Postre 3</li> <li><a href="#pag1" data‐rel="back">Volver</a></li> </ul> </li> <li>Platos Fuertes <ul> <li>Plato 1</li> <li>Plato 2</li> <li>Plato 3</li> <li><a href="#pag1" data‐rel="back">Volver</a></li> </ul> </li>

wvillota@espol.edu.ec

Demostración 26 – 3/3  Uso de listas anidadas <li>Bebidas <ul> <li>Bebida 1</li> <li>Bebida 2</li> <li>Bebida 2</li> <li>Bebida 3</li> <li><a href="#pag1" data‐rel="back">Volver</a></li> </ul> </li> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4> </div> </div>

wvillota@espol.edu.ec

Laboratorio 8 – 1/4  Uso de listas interactivas anidadas

wvillota@espol.edu.ec

6

24/05/2012

Laboratorio 8 – 2/4  Uso de listas interactivas anidadas

wvillota@espol.edu.ec

Laboratorio 8 – 3/4  Uso de listas interactivas anidadas

wvillota@espol.edu.ec

Laboratorio 8 – 4/4  Uso de listas interactivas anidadas

wvillota@espol.edu.ec

7

24/05/2012

Divisores de listas – 1/2 – Usted puede utilizar separadores para dividir una lista única en las agrupaciones de filas con sus propios títulos, como se muestra en la siguiente figura:

‐ Para hacer esto en jQuery Mobile, podemos utilizar una nueva función disponible para los elementos li: data‐role = "list‐divider" wvillota@espol.edu.ec

Demostración 27 – 2/2  Uso de divisores de listas <div data‐role="content"> <ul data‐role="listview“ data‐dividertheme="d" data‐theme="e"> <li data‐role="list‐divider">Grupo A <li>Argentina</li> <li>Nigeria</li> <li>England</li> <li data‐role="list‐divider">Grupo B</li> <li>United States</li> <li>Mexico</li> <li>Korea</li> <li data‐role="list‐divider">Grupo C</li> <li>Germany</li> <li>Finland</li> <li>Chile</li> </ul> </div>

wvillota@espol.edu.ec

Botones dobles – 1/6 – A veces es útil si podemos tener dos posibles acciones interactivas que operan en la misma fila. El escenario más común es tener una acción de detalle, y también una acción de edición.

– Por ejemplo, ¿el usuario que consulta una lista de álbumes, que debe ser presentado con la posibilidad de comprar y escuchar a cada uno de ellos de manera rápida y sencilla.

wvillota@espol.edu.ec

8

24/05/2012

Demostración 28 – 2/6  Uso de botones dobles <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>Platos Típicos</h1> </div> <div data role="content"> <div data‐role= content > <ul data‐role="listview"> <li><a href="#deta1">Caldo de bolas</a> <a href="#precio1">Precio</a> <li><a href="#deta2">Caldo de Manguera</a> <a href="#precio2">Precio</a> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4> </div>

wvillota@espol.edu.ec

Demostración 28 – 3/6  Uso de botones dobles <div data‐role="page" id="deta1" data‐add‐back‐btn="true"> <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>Caldo de bolas</h1> </div> <div data‐role="content"> <h4>INGREDIENTES </h4> <p>1 ½ libra de hueso 5 verdes crudos 2 hojas de col 1 pimiento ½ cucharadita de pimienta y comino 1 cucharada de perejil 5 verdes cocinados ½ libra de carne molida 1csebolla paiteña 3 dientes de ajo ½. </p> </div> </div>

wvillota@espol.edu.ec

Demostración 28 – 4/6  Uso de botones dobles <div data‐role="page" id="precio1" data‐add‐back‐btn="true"> <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>Caldo de bolas</h1> </div> <div data‐role="content"> <h4><b>Precio:</b> $ 5 </h4> </div> </div>

wvillota@espol.edu.ec

9

24/05/2012

Demostración 28 – 5/6  Uso de botones dobles <div data‐role="page" id="deta2" data‐add‐back‐btn="true"> <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>Caldo de Manguera</h1> </div> <div data‐role="content"> <p>El caldo de manguera es una receta típica de la gastronomía ecutoriana y con mucha historia. </p> <h4>INGREDIENTES:</h4> <p> 2 tazas de sangre de Chancho, 1 col, la mitad cocida, y la otra mitad cruda, menudencias e intestinos de chancho, 1 pimiento.</p> </div> </div>

wvillota@espol.edu.ec

Demostración 28 – 6/6  Uso de botones dobles <div data‐role="page" id="precio2" data‐add‐back‐btn="true"> <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>Caldo de Manguera</h1> </div> <div data‐role="content"> <h4><b>Precio:</b> $ 4.0 </h4> </div> </div>

wvillota@espol.edu.ec

Laboratorio 9 – 1/2  Uso de listas con botones dobles

Características

Precio wvillota@espol.edu.ec

10

24/05/2012

Laboratorio 9 – 2/2  Uso de listas con botones dobles

Características

Características

Precio

Precio wvillota@espol.edu.ec

Imágenes – 1/3 – En cada fila podemos definir una imagen para identificar gráficamente el elemento.

– Hay dos diferentes tipos de imágenes que podemos añadir a cada fila: iconos y miniaturas.

– El tamaño de las imágenes para poner como íconos en la lista es de aproximadamente 25 ancho x 16 alto.

– El tamaño de las imágenes para poner como thumbnails en la lista es de aproximadamente 80 ancho x 80 alto.

wvillota@espol.edu.ec

Demostración 29 – 2/3  Uso imágenes en listas como íconos <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>World Cup</h1> </div> <div data‐role="content"> <ul data‐role="listview" data‐dividertheme="d" data‐theme="e"> <li data‐role="list‐divider">Grupo A <li><img src="images/ecuador.jpg" class="ui‐li‐icon">Ecuador</li> <li><img src="images/alemania.jpg" class="ui‐li‐icon">Alemania</li> <li data‐role="list‐divider">Grupo B</li> <li><img src="images/corea.jpg" class="ui‐li‐icon">Corea</li> <li><img src="images/brasil.jpg" class="ui‐li‐icon">Brasil</li> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4> </div>

wvillota@espol.edu.ec

11

24/05/2012

Demostración 30 – 3/3  Uso imágenes en listas como thumbnails <div data‐role="header" data‐theme="b" data‐position="fixed"> <h1>Platos Típicos</h1> </div> <div data role="content"> <div data‐role= content > <ul data‐role="listview"> <li><a href="#deta1"> <img src="images/cbola.jpg"> Caldo de bolas</a> <a href="#precio1">Precio</a> <li><a href="#deta2"> <img src="images/csalch.jpg"> Caldo de Manguera</a> <a href="#precio2">Precio</a> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4> </div>

wvillota@espol.edu.ec

Contador de burbujas – 1/3 – Un número de burbujas es un círculo con un número dentro puesto a la derecha de la fila por lo general que muestra cuántos elementos están ahí en las filas interactivas.

– Se puede utilizar para mostrar elementos no leídos, tareas sin terminar, o cualquier otra información numérica en una forma muy sencilla.

– Sólo tiene que utilizar cualquier elemento, como una etiqueta span, con una clase ui‐li‐count dentro de una fila de la lista y eso es todo. Por ejemplo: <li><a href=“cursos.html">Cursos de Programación</a> <span class="ui‐li‐count">4</span>

wvillota@espol.edu.ec

Demostración 31 – 2/3  Uso de número de burbujas <div data‐role="page" id="pag1"> <div data‐role="header" data‐theme="e" data‐position="fixed" > <h1>@prendamos</h1> </div> <div data‐role="content"> <h4 align="center">Cursos Interactivos</h4> <ul data‐role="listview" data‐inset="true"> <li><a href="#">Diseño</a> <span class="ui‐li‐count">3</span> <ul data‐inset="true"> <li>Photoshop</li> <li>Illustrator</li> <li>Fireworks</li> <li><a href="#pag1" data‐rel="back">Volver</a></li> </ul> </li> wvillota@espol.edu.ec

12

24/05/2012

Demostración 31 – 3/3  Uso de número de burbujas <li><a href="#">Programación</a> <span class="ui‐li‐count">2</span> <ul data‐inset="true"> <li>C# net</li> <li>C# .net</li> <li>Java</li> <li><a href="#pag1" data‐rel="back">Volver</a></li> </ul> </li> <li><a href="#">Ofimática</a> <span class="ui‐li‐count">1</span> <ul data‐inset="true"> <li>Word 2010</li> <li><a href="#pag1" data‐rel="back">Volver</a></li> </ul> </li> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4></div>/div>

wvillota@espol.edu.ec

Contenido relacionado – 1/2 – Hasta ahora, todas las listas que hemos diseñado tiene una sola columna para el contenido del texto. Se puede añadir una miniatura o un icono, pero sólo una columna de texto.

– Podemos agregar una columna de segundo nivel a todas las filas para obtener información adicional que desee mostrar.

– Para ello, podemos utilizar cualquier elemento HTML con una clase ui‐li‐ aside, como un elemento span ó DIV. <ul data‐role="listview"> <li><a href=“#">Soda</a> <span class="ui‐li‐aside">$1.00</span> <li><a href=“#">Sandwich</a> <span class="ui‐li‐aside">$3.20</span> <li><a href=“#">Ice cream</a> <span class="ui‐li‐aside">$1.50</span> </ul> wvillota@espol.edu.ec

Demostración 32 – 2/2  Uso de contenido relacionado <div data‐role="content"> <h4 align="center">Menú</h4> <ul data‐role= <ul data role="listview" listview data‐inset= data inset="true" true >> <li><a href="buy.html">Soda <span class="ui‐li‐aside">$1.00</a></span> <li><a href="#">Sandwich <span class="ui‐li‐aside">$3.20</a></span> <li><a href="#">Ice Cream <span class="ui‐li‐aside">$1.50</a></span> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4></div>/div> wvillota@espol.edu.ec

13

24/05/2012

Título y descripción – 1/2 – Si queremos mostrar un título y una descripción, como parte de la fila, podemos hacerlo por utilizando algún elemento de cabecera Hx para el título y un elemento P para la descripción del texto.

– Por supuesto, usted puede mezclar el título y la descripción con el contenido relacionado, con los iconos o thumbnails en la misma fila. <ul data‐role="listview" data‐inset="true" > <li><a href="#"> <h3>Bebida</h3> <p>Elige tu refresco favorito </p> <span class="ui‐li‐aside">$1.00</a></span> </ul>

wvillota@espol.edu.ec

Demostración 33 – 2/2  Uso de título y descripción <div data‐role="content"> <h4 align="center">Menú</h4> <ul data‐role="listview" data‐inset="true" > <li>< h f "#"> <li><a href="#"> <h3>Bebida</h3> <p>Elige tu refresco favorito </p> <span class="ui‐li‐aside">$1.00</a></span> <li><a href="#"> <h3>Sandwich</h3> <p>Jamón y Queso, jamón y huevo o atún</p> <span class="ui‐li‐aside">$3.20</a></span> <li><a href="#"> <h3>Helado</h3> <p>Chocolate, vainilla o fresa</p> <span class="ui‐li‐aside">$1.50</a></span> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b"> <h4>www.jquerymobile.com</h4></div>/div>

wvillota@espol.edu.ec

Filtrado de datos con búsqueda – 1/2

– La magia de jQuery Mobile ha sucedido. Al agregar este atributo simple, un cuadro de búsqueda se adjunta automáticamente en la parte superior de la lista (página completa o recuadro) y funciona!

– Esta característica va a filtrar nuestros elementos de la lista sobre la base de escritura del usuario. El cuadro de texto de búsqueda se ve muy bien, con un icono de búsqueda en el lado izquierdo, un marca de agua texto de sugerencia, esquinas redondeadas, y un botón de borrado en el lado derecho.

– Se puede buscar en el elemento UL como OL y agregar data‐filter="true" <ul data‐role="listview" data‐filter="true"> <!‐‐ list rows ‐‐> </ul>

wvillota@espol.edu.ec

14

24/05/2012

Demostración 34 – 2/2  Filtrado de datos con búsqueda <div data‐role="content"> <h4 align="center">Menú</h4> <ul data‐role="listview" data‐inset="true" data‐filter="true" data‐filter‐ placeholder= Buscar >> placeholder="Buscar" <li><a href="#"> <h3>Bebida</h3> <p>Elige tu refresco favorito </p> <span class="ui‐li‐aside">$1.00</a></span> <li><a href="#"> <h3>Sandwich</h3> <p>Jamón y Queso, jamón y huevo o atún</p> <span class="ui‐li‐aside">$3.20</a></span> <li><a href="#"> <h3>Helado</h3> <p>Chocolate, vainilla o fresa</p> <span class="ui‐li‐aside">$1.50</a></span> </ul> </div> <div data‐role="footer" data‐position="fixed" data‐theme="b">

wvillota@espol.edu.ec

Laboratorio 10 – 1/2  Uso de imágenes y filtro de datos

Características

Precio wvillota@espol.edu.ec

Laboratorio 10 – 2/2  Uso de imágenes y filtro de datos

Características

Características

Precio

Precio wvillota@espol.edu.ec

15

24/05/2012

Preguntas

? ? ? ?

wvillota@espol.edu.ec

16