jquery mobile tutorial

24/05/2012

1

Desarrollo de aplicaciones móviles conmóviles con

MSc. Wellington Villota

Lección: jQuery ‐ Listas

• Definición• Listas con recuadro

[email protected]

• Listas interactivas• Listas anidadas• Divisores de listas• Listas con botones dobles• Imágenes• Contador de burbujas• Laboratorios

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

[email protected]

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>

24/05/2012

2

Listas – 2/3

[email protected]

Vista de una lista básica

Demostración 23 – 3/3

<div data‐role="content">

<h2 align="center">Cursos</h2>

<ul data‐role="listview">

<li>jQueryMobile

Uso de Uso de listaslistas

[email protected]

<li>jQueryMobile

<li>Dreamweaver

<li>Fireworks

<li>jQuery

</ul>


<ol data‐role="listview">

<li>jQueryMobile

<li>Dreamweaver

<li>Fireworks

<li>jQuery

</ol>

</div>

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:

[email protected]

24/05/2012

3

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áticamentedentro de un bloque con esquinas redondeadas y tiene márgenes establecidos para el espacio adicional.

[email protected]

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




<ul data‐role="listview“ data‐inset="true" >

<li>jQueryMobile

Uso de Uso de listas con recuadroslistas con recuadros

[email protected]

<li>jQueryMobile

<li>Dreamweaver

<li>Fireworks

<li>jQuery

</ul>


<ol data‐role="listview“ data‐inset="true" >

<li>jQueryMobile

<li>Dreamweaver

<li>Fireworks

<li>jQuery

</ol>

</div>

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

[email protected]

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>

24/05/2012

4

Listas Interactivas – 2/4

[email protected]

Vista de lista con botones



<h3>Unordered List</h3>


<li><a href="#it1">Item 1</a></li>

Uso de Uso de listas interactivaslistas interactivas

[email protected]

<li><a href= #it1 >Item 1</a></li>

<li><a href="#">Item 2</a></li>


</ul>

<h3>Ordered List</h3>

<ol data‐role="listview">

<li><a href="#it1">Item 1</a></li>



</ol>

</div>


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


[email protected]

</div>


<h2 align="center">ITEM 1</h2>

<p>Un framework de interfaz de usuariomulti‐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>

24/05/2012

5


Laboratorio 7 – 1/2

[email protected]



[email protected]• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.

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.

á d l l d l l d l

[email protected]

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

24/05/2012

6



<h3 align="center">Pike+</h3>


<li>Postres

Uso de Uso de listas anidadaslistas anidadas

[email protected]

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


</ul>

</li>


<li>Bebidas

<ul>

<li>Bebida 1</li>

<li>Bebida 2</li>

Uso de Uso de listas anidadaslistas anidadas

[email protected]

<li>Bebida 2</li>

<li>Bebida 3</li>


</ul>

</li>

</ul>

</div>



</div>

</div>

Uso de Uso de listas interactivas anidadaslistas interactivas anidadas


[email protected]

24/05/2012

7



[email protected]



[email protected]



[email protected]

24/05/2012

8

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:

[email protected]

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



<ul data‐role="listview“ data‐dividertheme="d" data‐theme="e">

<li data‐role="list‐divider">Grupo A

<li>Argentina</li>

Uso de Uso de divisores de listasdivisores de listas

[email protected]

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

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.

[email protected]

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

24/05/2012

9



<h1>Platos Típicos</h1>

</div>

<div data role="content">

Uso de Uso de botones doblesbotones dobles

[email protected]

<div data‐role= content >


<li><a href="#deta1">Caldo de bolas</a>

<a href="#precio1">Precio</a>

<li><a href="#deta2">Caldo de Manguera</a>


</ul>

</div>



</div>


<div data‐role="page" id="deta1" data‐add‐back‐btn="true">


<h1>Caldo de bolas</h1>


[email protected]

</div>


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


<div data‐role="page" id="precio1" data‐add‐back‐btn="true">


[email protected]


<h1>Caldo de bolas</h1>

</div>


<h4><b>Precio:</b> $ 5 </h4>

</div>

</div>

24/05/2012

10


<div data‐role="page" id="deta2" data‐add‐back‐btn="true">


<h1>Caldo de Manguera</h1>


[email protected]

</div>


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


<div data‐role="page" id="precio2" data‐add‐back‐btn="true">


<h1>Caldo de Manguera</h1>


[email protected]

</div>


<h4><b>Precio:</b> $ 4.0 </h4>

</div>

</div>

Uso de Uso de listas con botones dobleslistas con botones dobles


[email protected]

Características

Precio

24/05/2012

11

Uso de Uso de listas con botones dobleslistas con botones dobles


[email protected]

Características

Precio

Características

Precio

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:

[email protected]

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.



<h1>World Cup</h1>

</div>


Uso Uso imágenes en listas como íconosimágenes en listas como íconos

[email protected]

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

24/05/2012

12



<h1>Platos Típicos</h1>

</div>

<div data role="content">

Uso imágenes en listas como Uso imágenes en listas como thumbnailsthumbnails

[email protected]

<div data‐role= content >


<li><a href="#deta1"> <img src="images/cbola.jpg"> Caldo de bolas</a>


<li><a href="#deta2"> <img src="images/csalch.jpg"> Caldo de Manguera</a>


</ul>

</div>



</div>

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.

[email protected]

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


<div data‐role="page" id="pag1">

<div data‐role="header" data‐theme="e" data‐position="fixed" >

<h1>@prendamos</h1>

</div>

Uso de número de burbujasUso de número de burbujas

[email protected]

</div>


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


</ul>

</li>

24/05/2012

13


<li><a href="#">Programación</a>



<li>C# net</li>

Uso de número de burbujasUso de número de burbujas

[email protected]

<li>C# .net</li>

<li>Java</li>


</ul>

</li>

<li><a href="#">Ofimática</a>



<li>Word 2010</li>


</ul>

</li>

</ul>

</div>


<h4>www.jquerymobile.com</h4></div>/div>

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.

[email protected]

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



<h4 align="center">Menú</h4>

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

Uso de contenido relacionadoUso de contenido relacionado

[email protected]

<ul data‐role= listview data‐inset= true >

<li><a href="buy.html">Soda

<span class="ui‐li‐aside">$1.00</a></span>

<li><a href="#">Sandwich


<li><a href="#">Ice Cream


</ul>

</div>



24/05/2012

14

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.

[email protected]

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




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

<li>< h f "#">

Uso de título y descripciónUso de título y descripción

[email protected]

<li><a href="#">

<h3>Bebida</h3>

<p>Elige tu refresco favorito </p>


<li><a href="#">

<h3>Sandwich</h3>

<p>Jamón y Queso, jamón y huevo o atún</p>


<li><a href="#">

<h3>Helado</h3>

<p>Chocolate, vainilla o fresa</p>


</ul>

</div>



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!

[email protected]

– Esta característica va a filtrar nuestros elementos de la lista sobre la base de escritura del usuario. El cuadro de texto de búsquedase ve muy bien, con un icono de búsqueda en el lado izquierdo, unmarca 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>

24/05/2012

15




<ul data‐role="listview" data‐inset="true" data‐filter="true" data‐filter‐placeholder="Buscar" >

Filtrado de datos con búsqueda Filtrado de datos con búsqueda

[email protected]

placeholder= Buscar >

<li><a href="#">

<h3>Bebida</h3>

<p>Elige tu refresco favorito </p>


<li><a href="#">

<h3>Sandwich</h3>

<p>Jamón y Queso, jamón y huevo o atún</p>


<li><a href="#">

<h3>Helado</h3>

<p>Chocolate, vainilla o fresa</p>


</ul>

</div>


Uso de Uso de imágenes y filtro de datosimágenes y filtro de datos


[email protected]

Características

Precio

Uso de imágenes y filtro de datosUso de imágenes y filtro de datos


[email protected]

Características

Precio

Características

Precio

24/05/2012

16

Preguntas

? ? ? ?

[email protected]

jquery mobile tutorial

Documents