jquery mobile tutorial
Post on 07-Mar-2016
235 Views
Preview:
DESCRIPTION
TRANSCRIPT
24/05/2012
1
Desarrollo de aplicaciones móviles conmóviles con
MSc. Wellington Villota
Lección: jQuery ‐ Listas
• Definición• Listas con recuadro
wvillota@espol.edu.ec
• 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
wvillota@espol.edu.ec
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
wvillota@espol.edu.ec
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
wvillota@espol.edu.ec
<li>jQueryMobile
<li>Dreamweaver
<li>Fireworks
<li>jQuery
</ul>
<h2 align="center">Cursos</h2>
<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:
wvillota@espol.edu.ec
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.
wvillota@espol.edu.ec
– 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>
Demostración 24 – 3/3
<div data‐role="content">
<h2 align="center">Cursos</h2>
<ul data‐role="listview“ data‐inset="true" >
<li>jQueryMobile
Uso de Uso de listas con recuadroslistas con recuadros
wvillota@espol.edu.ec
<li>jQueryMobile
<li>Dreamweaver
<li>Fireworks
<li>jQuery
</ul>
<h2 align="center">Cursos</h2>
<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
wvillota@espol.edu.ec
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
wvillota@espol.edu.ec
Vista de lista con botones
Demostración 25 – 3/4
<div data‐role="content">
<h3>Unordered List</h3>
<ul data‐role="listview">
<li><a href="#it1">Item 1</a></li>
Uso de Uso de listas interactivaslistas interactivas
wvillota@espol.edu.ec
<li><a href= #it1 >Item 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>
Demostración 25 – 4/4
<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>
Uso de Uso de listas interactivaslistas interactivas
wvillota@espol.edu.ec
</div>
<div data‐role="content">
<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
Uso de Uso de listas interactivaslistas interactivas
Laboratorio 7 – 1/2
wvillota@espol.edu.ec
Uso de Uso de listas interactivaslistas interactivas
Laboratorio 7 – 2/2
wvillota@espol.edu.ec• 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
wvillota@espol.edu.ec
– 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
Demostración 26 – 2/3
<div data‐role="content">
<h3 align="center">Pike+</h3>
<ul data‐role="listview">
<li>Postres
Uso de Uso de listas anidadaslistas anidadas
wvillota@espol.edu.ec
<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>
Demostración 26 – 3/3
<li>Bebidas
<ul>
<li>Bebida 1</li>
<li>Bebida 2</li>
Uso de Uso de listas anidadaslistas anidadas
wvillota@espol.edu.ec
<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>
Uso de Uso de listas interactivas anidadaslistas interactivas anidadas
Laboratorio 8 – 1/4
wvillota@espol.edu.ec
24/05/2012
7
Uso de Uso de listas interactivas anidadaslistas interactivas anidadas
Laboratorio 8 – 2/4
wvillota@espol.edu.ec
Uso de Uso de listas interactivas anidadaslistas interactivas anidadas
Laboratorio 8 – 3/4
wvillota@espol.edu.ec
Uso de Uso de listas interactivas anidadaslistas interactivas anidadas
Laboratorio 8 – 4/4
wvillota@espol.edu.ec
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:
wvillota@espol.edu.ec
‐ Para hacer esto en jQuery Mobile, podemos utilizar una nueva función disponible para los elementos li: data‐role = "list‐divider"
Demostración 27 – 2/2
<div data‐role="content">
<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
wvillota@espol.edu.ec
<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.
wvillota@espol.edu.ec
– 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
Demostración 28 – 2/6
<div data‐role="header" data‐theme="b" data‐position="fixed">
<h1>Platos Típicos</h1>
</div>
<div data role="content">
Uso de Uso de botones doblesbotones dobles
wvillota@espol.edu.ec
<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>
Demostración 28 – 3/6
<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>
Uso de Uso de botones doblesbotones dobles
wvillota@espol.edu.ec
</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>
Demostración 28 – 4/6
<div data‐role="page" id="precio1" data‐add‐back‐btn="true">
Uso de Uso de botones doblesbotones dobles
wvillota@espol.edu.ec
<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>
24/05/2012
10
Demostración 28 – 5/6
<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>
Uso de Uso de botones doblesbotones dobles
wvillota@espol.edu.ec
</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>
Demostración 28 – 6/6
<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>
Uso de Uso de botones doblesbotones dobles
wvillota@espol.edu.ec
</div>
<div data‐role="content">
<h4><b>Precio:</b> $ 4.0 </h4>
</div>
</div>
Uso de Uso de listas con botones dobleslistas con botones dobles
Laboratorio 9 – 1/2
wvillota@espol.edu.ec
Características
Precio
24/05/2012
11
Uso de Uso de listas con botones dobleslistas con botones dobles
Laboratorio 9 – 2/2
wvillota@espol.edu.ec
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:
wvillota@espol.edu.ec
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.
Demostración 29 – 2/3
<div data‐role="header" data‐theme="b" data‐position="fixed">
<h1>World Cup</h1>
</div>
<div data‐role="content">
Uso Uso imágenes en listas como íconosimágenes en listas como íconos
wvillota@espol.edu.ec
<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>
24/05/2012
12
Demostración 30 – 3/3
<div data‐role="header" data‐theme="b" data‐position="fixed">
<h1>Platos Típicos</h1>
</div>
<div data role="content">
Uso imágenes en listas como Uso imágenes en listas como thumbnailsthumbnails
wvillota@espol.edu.ec
<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>
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.
wvillota@espol.edu.ec
– 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>
Demostración 31 – 2/3
<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
wvillota@espol.edu.ec
</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>
24/05/2012
13
Demostración 31 – 3/3
<li><a href="#">Programación</a>
<span class="ui‐li‐count">2</span>
<ul data‐inset="true">
<li>C# net</li>
Uso de número de burbujasUso de número de burbujas
wvillota@espol.edu.ec
<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>
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.
wvillota@espol.edu.ec
– 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>
Demostración 32 – 2/2
<div data‐role="content">
<h4 align="center">Menú</h4>
<ul data role="listview" data inset="true" >
Uso de contenido relacionadoUso de contenido relacionado
wvillota@espol.edu.ec
<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
<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>
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.
wvillota@espol.edu.ec
– 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>
Demostración 33 – 2/2
<div data‐role="content">
<h4 align="center">Menú</h4>
<ul data‐role="listview" data‐inset="true" >
<li>< h f "#">
Uso de título y descripciónUso de título y descripción
wvillota@espol.edu.ec
<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>
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!
wvillota@espol.edu.ec
– 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
Demostración 34 – 2/2
<div data‐role="content">
<h4 align="center">Menú</h4>
<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
wvillota@espol.edu.ec
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">
Uso de Uso de imágenes y filtro de datosimágenes y filtro de datos
Laboratorio 10 – 1/2
wvillota@espol.edu.ec
Características
Precio
Uso de imágenes y filtro de datosUso de imágenes y filtro de datos
Laboratorio 10 – 2/2
wvillota@espol.edu.ec
Características
Precio
Características
Precio
24/05/2012
16
Preguntas
? ? ? ?
wvillota@espol.edu.ec
top related