jqquery mobile por yamil lambert

Desarrollo de aplicaciones móviles

Msg. Yamil Lambert

ylambert@espol.edu.ec

Lección: jQuery

• Introducción• Características• Requisitos• Compatibilidad

Para todas las plataformas

1 código base

Hacer que funcioneen todas partes

y para todos

Introducción

Una alternativa a jQuery. De hecho jQuery Mobile utiliza a jQuery.

Un SDK/compilador para appsUn framework para trabajar en JavaScript.

De repente en cuestiones avanzadas podremos utilizarla.

La solución para todo

¿ Qué no es jQuery Mobile ?

Introducción

Un framework de interfaz de usuario multi-plataforma que permite crear webapps y Apps para teléfonos y tabletas táctiles.

¿ Qué es jQuery Mobile ?

¿Qué es una Webapps ?

Un sitio web o servicio en el navegador.Una aplicación a pantalla completa instalada.Una aplicación híbrido/nativa en tiendas

utilizando Phonegap.

Introducción

Docenas de plataformas distintas (iOS, Android, Windows Phone, Blackberry, Symbian, WebOS, Bada, etc.).

Al menos 40 navegadores distintos.Ser multi-plataforma es clave para el éxito.La compatibilidad de HTML5 no es boolean

¿ Por qué jQuery Mobile ?

Características

– Código HTML5 no intrusivo– Código abierto– Liviano– Multiplataforma usando mejora progresiva– Soporte de accesibilidad– Personalizable– Soporte de la comunidad– Incluye API de JavaScript

Requisitos

– HTML 5– CSS 3– JavaScript– jQuery

Necesitas saber

Lo que necesitas

– Un editor de texto– Un navegador HTML5 para probar– ¿Y el framework? (Incluso es posible prescindir del mismo)– ¿Y compiladores nativos? (Puede ser en la nube ó utilizar Phonegap)– ¿Y simuladores y emuladores? (Para probar como se ve la Apps)

Compatibilidad

– iOS (iPhone - iPad)– Android ( Desde la versión 1.5 )– BlackBerry ( Desde la versión 5 en adelante y la versión de tablet la

Playbook )– Nokia (Symbian, touch, symbian3, symbian3-anna, symbian belle, MeeGo

OS 1.1 y 1.2( Phone N9 ))– webOS ( Hewlett-Packard para sus versiones de teléfonos y tabletas)– Windows Phone ( Desde la versión Mango 7.5 que incluye ahora a los

Nokia)– Opera, Firefox (Navegadores)– Bada (OS y navegador de Samsung), Kindle (Que posee Amazon en sus

distintas versiones para leer libros inclusive la Kindle Fire que es la tableta de Amazon)

Compatibilidad

Calidad Alta

Un navegador que es capaz de, como mínimo, la utilización de jQuery Mobile.

Calidad Media

Un navegador capaz que no tiene cuota de mercado suficiente como para justificar el día a día de pruebas.

Calidad Baja

Un navegador que no es capaz de utilizar jQuery mobile. No se proporcionará ningún script jQuery Mobile o CSS (cayendo de nuevo a la versión HTML y CSS).

Android Browser

Safari

Web Browser

BlackBerry Browser

Internet Explorer

Framework – 1/2

Un archivo JavaScript y CSS baseUn archivo JavaScript y Css por componenteUn grupo de imágenes (representan íconos del

framework)Los archivos JavaScript y Css los encontramos en

dos formas: versión comprimida para producción versión sin compresión para desarrollo

Necesitamos el framework de jQuery.

Framework – 2/2

– Alojamiento propio• Lo descargamos de http://jquerymobile.com/download/ y lo ponemos

en nuestro servidores es decir en nuestra carpeta de proyecto.– CDN - versión estable ó versión desarrollo (cambia día a día)

• Content Delivery Networks-Redes de distribución de contenidos. Esto significa dejar alojadas en otro servidor las librerías e imágenes de jQuery.

• En ese caso Jquery posee un servidor donde podemos apuntar la descarga del javascript y el css.

• También Microsoft ofrece una versión de CDN para jQuery Mobile.• La ventaja de usar CDN es que no tenemos que descargar nada y

podemos comenzar a probar jQuery en segundos.• Otra ventaja que es utiliza cache compartido en el Browser.• Desventaja del CDN es que necesitamos Internet y que tenemos que

confiar en el CDN porque si este no funciona nuestra Apps tampoco funcionará.

• Comenzando a trabajar• Estructura• Roles• Temas• Botones • Páginas Internas y Externas• Links Absolutos• Transiciones• Íconos personalizados

Comenzando a trabajar

– Versión estable• http://jquerymobile.com/download/

Descargar jQuery Mobile

Descargar jQuery Core

– Versión estable 1.6.4• http://docs.jquery.com/Downloading_jQuery

Estructura

– 1. HTML5 Doctype– 2. jQuery Mobile CSS– 3. jQuery Core JS– 4. jQuery Mobile JS

<!doctype html><html>

</html>

– jQuery Mobile usa un atributo HTML llamado data-role para asociar un elemento con un widget. Por ejemplo:

• data-role="page"• data-role="header“• data-role=“content“• data-role="footer"• data-role="navbar"• data-role="button"• data-role="listview"• data-role="controlgroup"

Data-role = page

</div>

Más roles

< body><div data-role="page“ > <div data-role="header"> </div> <div data-role="content"> </div> <div data-role="footer"> </div></div>

< body>

PageHeader

Content

Footer

Demostración 1

< body><div data-role="page"> <div data-role="header"> <h1>jQuery mobile</h1> </div> <div data-role="content"> <p> Este es un texto dentro de

una página</p> </div> <div data-role="footer">

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

< body>

Uso de roles

– jQuery Mobile viene con muchos esquemas de color los cuales pueden ser controlados usando el atributo data-theme.

– Se puede especificar data-theme en una página, toolbar, botones, etc.

– Intenta especificar data-theme=a,b,c,d,e y f.

<div data-role="page“ data-theme="e"> <div data-role="header“data-theme=“c"> <h1>jQuery mobile</h1> </div>

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

data-theme=“b”data-theme=“a” data-theme=“e”

Demostración 2

< body><div data-role="page“ data-theme="e"> <div data-role="header“ data-theme=“c"> <h1>jQuery mobile</h1> </div> <div data-role="content"> <p> Este es un texto dentro de

una página</p> </div> <div data-role="footer“ data-theme=“b">

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

< body>

Uso de Temas

Botones

– Se puede crear un botón agregando data-role="button" a una etiqueta botón.

– button tag, un tag, o input type=submit|button|reset|image.

– Se puede agregar un ícono en el botón usando data-icon="icon-name".

– Por defecto el ícono va a la derecha pero se puede cambiar especificando data-iconpos.

Demostración 3

<div data-role="page“ data-theme=“b"> <div data-role="header" data-theme="e"> <h1>Botones</h1> </div> <div data-role="content"> <a href="#" data-

role="button" data-theme="d">Aceptar</a>

<a href="#" data-role="button" data-theme="a">Cancelar</a>

</div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>

Uso de Botones

Demostración 4

<div data-role="page“ data-theme=“b"> <div data-role="header" data-theme="e"> <h1>Botones</h1> </div> <div data-role="content"> <a href="#" data-role="button"

data-theme="d“ data-inline="true">Aceptar</a>

<a href="#" data-role="button" data-theme="a“ data-inline="true">Cancelar</a>

Uso de Botones

Páginas Internas

– Aprenderemos a generar documentos multipágina y a vincularla entre ellas de manera automática.

<div data-role="page“ data-theme=“b“ id="pagina1"> ........ <div data-role="content"> <a href="#pagina2" data-role="button" data-theme="d“ >Ir a

</a> </div></div>

<div data-role="page" data-theme="b" id="pagina2" data-add-back-btn="true">......... <div data-role="content"> <p>Esta es la segunda página</p> <p><a href="#pagina1" data-rel="back">Volver</a></p> </div>

------ Página 2 ------

Demostración 5

<div data-role="header" data-theme="e"> <h1>Página Interna</h1> </div> <div data-role="content"> <a href="#pagina2" data-

role="button">Ir hacia página 2</a> </div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>

Uso de Páginas Internas – 1/2

Demostración 5

<div data-role="header" data-theme="e"> <h1>Segunda Página</h1> </div> <div data-role="content"> <p>Esta es la segunda

página</p> <p><a href="#pagina1" data-

rel="back">Volver</a></p> </div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>

Uso de Páginas Internas – 2/2

Páginas Externas

– Cada vez que cargamos un nuevo documento HTML jQuery lo hace a través de AJAX.

<div data-role="page“ data-theme=“b“ > ........ <div data-role="content"> <a href=“pagina2.html" data-role="button" data-theme="d“ >Ir a

página externa</a> </div></div>

<div data-role="page" data-theme="b“ >......... <div data-role="content"> <p>Yo soy otro documento HTML</p></div>

pagina2.html

Demostración 6

<div data-role="page" data-theme="b“ > <div data-role="header" data-theme="e"> <h1>Página Externa</h1> </div> <div data-role="content"> <a

href="demo6_pagexterna2.html" data-role="button">Ir página externa</a>

Uso de Páginas Externas – 1/2

Demostración 6

<div data-role="page" data-theme="b" > <div data-role="header" data-theme="e"> <h1>Página Externa</h1> </div> <div data-role="content"> Yo soy otro documento

HTML</a> </div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>

Uso de Páginas Externas – 2/2

Links Absoluto

– Creamos vínculos a sitios web que están fuera de nuestro entorno (Internet) y que no son documentos jQuery.

<div data-role="page“ data-theme=“b“ > ........ <div data-role="content"> <a href=“http://www.google.com.ec" data-role="button" data-

theme="d“ rel=“external” >Ir a web absoluta</a> </div></div>

Demostración 7

<div data-role="page" data-theme="b" > <div data-role="header" data-theme="e"> <h1>Link Absoluto</h1> </div> <div data-role="content"> <a href="http://www.google.com.ec"

data-role="button" rel="external">Ir a web Absoluta</a>

<a href="mailto:info@aprendo.net" data-role="button" >Email</a>

<a href="tel:12345678" data-role="button">Llamar</a>

Uso de Links Absoluto

Laboratorio 1

Uso de páginas internas, externas y Links Absoluto

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

Página Interna

Página Externa

Link absoluto externo

Transiciones – 1/2

– slide• Deslice de derecha a izquierda(default)

– slideup• Deslice desde el fondo hasta la parte superior

– slidedown• Deslice de la parte superior al fondo

Transiciones – 2/2

– pop• La nueva página crecerá a partir de un pequeño punto en medio de una página a

pantalla completa.

– fade• Una animación de fundido cruzando entre las páginas viejas y nuevas.

– flip• Voltear la página de la vieja a la nueva

Demostración 8

<div data-role="page" data-theme="b" id="pagina1"> <div data-role="header" data-theme="e"> <h1>Transiciones</h1> </div> <div data-role="content"> <a href="#pagina2" data-role="button" data-transition="slide">Slide</a> <a href="#pagina2" data-role="button" data-

transition="slideup">Slide up</a> <a href="#pagina2" data-role="button" data-transition="slidedown">Slide

down</a> <a href="#pagina2" data-role="button" data-transition="pop">Pop</a> <a href="#pagina2" data-role="button" data-transition="fade">Fade</a> <a href="#pagina2" data-role="button" data-transition="flip">Flip</a> </div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div>

</div>

Uso de transiciones

Cuadros de Diálogo

– Cualquier página válida de jQuery mobile también se puede mostrar como un cuadro de diálogo, simplemente añadiendo el atributodata-rel = "dialog“ en el enlace.

<div data-role="content" class="content"> <p>First page!</p> <p><a href="#page2" data-rel="dialog">Open page 2 as a dialog</a></p></div>

Demostración 9 – 1/2

Uso de Cuadros de Diálogo<div data-role="page" data-theme="b" id="pagina1"> <div data-role="header" data-theme="e"> <h1>Diálogo</h1> </div> <div data-role="content"> <p> Estas por eliminar algo importante </p> <a href="#confirmacion" data-role="button" data-rel="dialog">Eliminar</a> </div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>

Uso de Cuadros de Diálogo <div data-role="page" data-theme="b" id="confirmacion" > <div data-role="header" data-theme="e"> <h1>Eliminar</h1> </div> <div data-role="content"> <a href="#pagina1" data-role="button" data-direction="reverse">Si, eliminar</a> <a href="#pagina1" data-role="button" data-direction="reverse">No</a> </div> </div>

Laboratorio 2

Uso de transiciones

Slide Up

Toolbars - Botones en el header

– Podemos personalizar el encabezado con botones de acción, simplemente añadiendo la etiqueta <a href="#page2“ > Link </a> en la cabecera.

<div data-role="header" data-theme="e"> <h1>jQuery Mobile</h1>

Demostración 10

Uso de botones en la cabecera

<div data-role="page" data-theme="b" > <div data-role="header" data-theme="e"> <h1>jQuery Mobile</h1> <a href="#pagina2" data-theme="a">Cancelar</a> <a href="#pagina2" data-role="none">Grabar</a> </div> <div data-role="content"> <p>Esto es un texto dentro de una página</p> </div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div></div>

Toolbars - Botones en el footer

– Podemos personalizar el pie con botones de acción, simplemente añadiendo la etiqueta <a href=“#“ > Link </a> en el pie.

<div data-role=“footer" data-theme="e“ class="ui-bar"> <a href=“#“>Agregar</a> <a href=“#“>Eliminar</a> <a href=“#“>Refrescar</a></div>

Demostración 11

Uso de botones en el pie

<div data-role="page" data-theme="b" > <div data-role="header" data-theme="e"> <h1>jQuery Mobile</h1> <a href="#pagina2" data-theme="a">Cancelar</a> <a href="#pagina2" data-role="none">Grabar</a> </div> <div data-role="content"> <p>Esto es un texto dentro de una página</p> </div> <div data-role="footer" data-theme="b“ class="ui-bar" > <a href="#" data-theme="e">Agregar</a> <a href="#">Eliminar</a> <a href="#" >Refrescar</a> </div></div>

Toolbars – Iconos en Botones – 1/2

– A menudo se necesita iconos en los botones, y jQuery Mobile viene con una variedad de íconos.

– También puede controlar la posición del ícono.Para especificar el icono de un botón, se aplica el atributo data- icon. El atributo de data-icon tiene los siguientes valores válidos:

Toolbars – Iconos en Botones – 2/2

– Puede especificar la posición del ícono con el atributo data-iconpos. Los valores válidos se muestran en la siguiente Tabla.

Demostración 12

Uso de íconos en botones y control de agrupación

<div data-role="page" data-theme="b" > <div data-role="header" data-theme="e"> <h1>jQuery Mobile</h1> <a href="#pagina2" data-theme="a">Cancelar</a> <a href="#pagina2" data-role="none">Grabar</a> </div> <div data-role="content"> <p>Esto es un texto dentro de una página</p> </div> <div data-role="footer" data-theme="b“ class="ui-bar" > <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-icon="plus">Agregar</a> <a href="#" data-icon="delete">Eliminar</a> <a href="#" data-icon="refresh">Refrescar</a> </div> </div></div>

Demostración 13

Uso de íconos personalizados en botones<div data-role="page" data-theme="b" > <div data-role="header" data-theme="e"> <h1>Botones</h1> <a href="#pagina2" data-theme="a" >Cancelar</a> <a href="#pagina2" data-role="none">Grabar</a> </div> <div data-role="content"> <p>Ícono en botones en diferentes posiciones</p> <div data-role="controlgroup" data-type="vertical"> <a href="#" data-icon="check" data-role="button" data-theme="d" data-iconpos="top">Aceptar</a> <a href="#" data-icon="plus" data-role="button" data-theme="d">Ayuda</a> <a href="#" data-icon="delete" data-role="button" data-theme="d" data-iconpos="bottom">Cancelar</a> <a href="#" data-icon="info" data-role="button" data-theme="d" data-iconpos="right">Información</a> <a href="#" data-icon="star" data-role="button" data-theme="d" data-iconpos="notext">Inicio</a> </div> </div> <div data-role="footer" data-theme="b“ > <h1>jQuery Mobile</h1> </div> </div>

Toolbars – Iconos personalizados en botones

– A menudo se necesita iconos personalizados para nuestras aplicaciones para lo cual debemos hacer lo siguiente:

1. Crear un nuevo estilo. Ejemplo<style type="text/css"> .ui-icon-myapp-reloj {

2. Aplicar el nuevo estilo. Ejemplo

Demostración 14

Uso de íconos personalizados en botones<div data-role="page" data-theme="b" > <div data-role="header" data-theme="e"> <h1>jQuery Mobile</h1></div> <div data-role="content"> <p>Esto es un texto dentro de una página</p> </div> <div data-role="footer" data-theme="b“ class="ui-bar”> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-icon="myapp-reloj">Hora</a> <a href="#" data-icon="myapp-correo">Email</a> </div> </div></div>

}.ui-icon-myapp-correo {

}</style>

Laboratorio 3

Uso de íconos personalizados en botones

Íconos personalizadosEn botones - Footer

Lección: jQuery

• Encabezado y pie - Posicionamiento• Barras de Navegación• Pie de página persistente• Contenido colapsable• Acordeón• Columnas• Laboratorios

Encabezado-pie y posicionamiento – 1/2

– Crearemos barras de herramientas fijas y experiencias a pantalla completa.

– El Posicionamiento de las barras de herramientas debe estar dado, los encabezados en la parte superior y los pie de página en la parte inferior.

– Para pantalla completa utilizaremos el atributo data-fullscreen=”true”.

– Para fijar el encabezado y el pie en la pantalla utilizaremos el atributo data-position=”fixed”.<div data-role="page" data-theme="b" data-fullscreen="true" >

<div data-role="header" data-theme="e" data-position="fixed"></div><div data-role="footer" data-theme="b" class="ui-bar" data-

position="fixed"></div></div>

Encabezado-pie y posicionamiento – 2/2

Demostración 15

<h1>jQuery Mobile</h1> <a href="#pagina2" data-theme="a"

>Cancelar</a> <a href="#pagina2" >Comenzar</a></div> <div data-role="content"> <p>La presente tiene como

finalidad ..........<div data-role="footer" data-theme="b" class="ui-bar"

data-position="fixed"> <a href="#" data-

icon="plus">Agregar</a> <a href="#" data-icon="delete">Eliminar</a> <a href="#" >Refrescar</a> </div> </div>

Uso de posicionamiento fijo y pantalla completa

Barras de Navegación – 1/3

– Una barra de navegación (también conocido como navbar) es un conjunto de enlaces que pueden ser colocados en una barra de herramientas, por lo general un pie de página, que se combinan para crear una serie de opciones exclusivas.

– La idea de una la barra de navegación es la de actuar como un método de navegación principal de nuestra aplicación web.

– En algunas plataformas formas, tales como iOS o Nokia, esta barra de navegación también se llama una barra de pestañas.

– La barra de navegación soporta hasta cinco elementos en la misma línea.

Aquí podemos ver una barra de navegación dentro de un encabezado y un pie de página

Aquí podemos ver una barra de navegación con el primer botón activo

<div data-role="header" data-theme="b"> <h1>jQuery Mobile</h1> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active">Primer</a> <li><a href="#">Segundo</a> <li><a href="#">Tercero</a> <li><a href="#">Cuarto</a> </ul> </div> </div>

Demostración 16

<div data-role="header" data-theme="b" data-position="fixed"> <h1>jQuery Mobile</h1> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active">Primer</a> <li><a href="#">Segundo</a> <li><a href="#">Tercero</a> <li><a href="#">Cuarto</a> </ul> </div> </div> <div data-role="content">Escribir.......</div><div data-role="footer" data-theme="b" data-position="fixed"> <div data-role="navbar" > <ul> Lo mismo que la cabececa ……………………………..</div>

Uso de Barra de navegación

Demostración 17

<div data-role="header" data-theme="b" data-position="fixed"> <h1>jQuery Mobile</h1> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active">Primer</a> <li><a href="#">Segundo</a> <li><a href="#">Tercero</a> <li><a href="#">Cuarto</a> </ul> </div> </div> <div data-role="content">Escribir.......</div><div data-role="footer" data-theme="b" data-position="fixed"> <h1>Uso de botones com íconos</h1> </div>

Uso de Barra de navegación con íconos

Pie de página persistente– 1/3

– Mientras pensaba en NavBars, entiendo que si cambiamos de un documento a otro, un nuevo pie de página aparecerá eliminando el actual.

– Para resolver este problema y muchos otros, puede usar un pie de página persistentes .

– Para hacer una barra de herramientas de persistencia, es necesario definir una identificación data-id para un pie de página fija para todas las páginas donde queremos tener el mismo pie de página.

Pie de página persistente– 2/3

El uso de pie de página persistentes

Uso de pie de página persistente

Uso de pie de página persistente<div data-role="page" data-theme="b" id="home1"> <div data-role="header" data-theme="b" data-position="fixed"> <h1>jQuery Mobile</h1> </div>

<div data-role="content"> <h2>HOME</h2> <p>La presente tien………… <a href="#contacts1" data-role="button">Ir a Contacts</a> </div>

<div data-role="footer" data-theme="b" data-position="fixed" data-id="pie1"> <div data-role="navbar" > <ul> <li><a href="#" class="ui-btn-active" data-icon="star">Home</a> <li><a href="#" data-icon="gear">Contacts</a> <li><a href="#" data-icon="info">Events</a> <li><a href="#" data-icon="grid">News</a> </ul> </div></div>

Uso de pie de página persistente<div data-role="page" id="contacts1"> <div data-role="header" data-theme="b" data-position="fixed"> <h1>jQuery Mobile</h1> </div>

<div data-role="content"> Contenido </div>

<div data-role="footer" data-theme="b" data-position="fixed" data-id="pie1"> <div data-role="navbar" > <ul> <li><a href="#home1" class="ui-btn-active" data-icon="star">Home</a> <li><a href="#" data-icon="gear">Contacts</a> <li><a href="#" data-icon="info">Events</a> <li><a href="#" data-icon="grid">News</a> </ul> </div></div>

Laboratorio 4

Uso de NavBar y pie persistentes

Páginas InternasPáginas Externas

Contenido colapsable– 1/3

– Recuerde que estamos apuntando a los dispositivos móviles. En los dispositivos móviles, el espacio es muy limitado.

– Eso es cuando el contenido plegable viene muy bien. El contenido plegable se puede ocultar y se puede mostrar por JavaScript después de tocar un título o un botón.

– Para crear contenido plegable, sólo tenemos que definir un contenedor con data-role="collapsible".

– Para que el contenido siempre este abierto utilizamos data-collapsed="false"

Contenido colapsable– 2/3

Los paneles plegables son una buena manera de mostrar gran cantidad de información en la misma página, dando al usuario la posibilidad de cerrar y abrir

Uso de contenido colapsable<div data-role="page”> <div data-role="header“> <h1>Colapsable</h1> </div>

<div data-role="content"> <div data-role="collapsible“ data-collapsed="false"> <h2>Tecnología</h2> <p>La red de "m……………….</p> </div> <div data-role="collapsible"> <h2>Entretenimiento</h2> <p>La Conferencia……………….</p> </div> </div>

<div data-role="footer“ > <h4>www.jquerymobile.com</h4> </div>

Acordeón – 1/3

– Hay otro comportamiento típico de aplicaciones de Internet relacionados al contenido colapsable.

– El acordeón: Esto le permite agrupar el contenido plegable para que sólo un panel de puede ser visible a la vez. Por lo tanto, al ver un panel, todos los demás están cerrados.

– Es decir, un contenedor con data-role="collapsible-set" y un grupo de paneles plegables como hijos.

Acordeón – 2/3

Un control de acordeón ricos se pueden crear utilizando un conjunto de paneles plegables, un panel visible a la vez.

Uso de Acordeón<div data-role="page”> <div data-role="header“> <h1>Colapsable Set</h1> </div> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible“ data-collapsed="false"> <h2>Tecnología</h2> <p>La red de "m……………….</p> </div> <div data-role="collapsible"> <h2>Entretenimiento</h2> <p>La Conferencia……………….</p> </div> </div> </div>

<div data-role="footer“ > <h4>www.jquerymobile.com</h4> </div>

Laboratorio 5

Uso de contenido colapsable y Acordeón

Acordeón

Columnas – 1/4

– jQuery Mobile nos ofrece unas plantillas para definir el contenido que se muestra en columnas, llamadas rejillas de diseño.

– Estas redes actúan como una tabla sin el problema semántico de la utilización de tabla (por favor, no utilice la tabla para nada, además de los datos tabulares).

– Para crear una cuadrícula, sólo tiene que utilizar un contenedor de bloque, por lo general un div con una clase de ui-grid-a para dos columnas, ui-grid-b para tres columnas, ui-grid-c para cuatro columnas, ui-grid-d para cinco columnas.

– Cada celda debe ser un contenedor de bloque usando ui-block-<letra> con <letra> siendo de A a D donde A representa la primera y D la quinta columna de la cuadrícula.

Columnas – 2/4

<div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a">Column 1</div> <div class="ui-block-b">Column 2</div> </div></div>

Uso de Columnas<div data-role="header"> <h1>Columnas</h1> <div data-role="navbar"> <ul> <li><a href="#pag1">Dos Columnas</a> <li><a href="#pag2">Tres Columnas</a> </ul> </div> </div> <div data-role="content"> <h2>Dos columnas y una fila</h2> <div class="ui-grid-a"> <div class="ui-block-a">Columna 1</div> <div class="ui-block-b">Columna 2</div> </div> </div> <div data-role="footer“ data-position="fixed" data-id="pie1" > <h4>www.jquerymobile.com</h4> </div>

Uso de Columnas<div data-role="page" data-theme="e" id="pag2"><div data-role="header"> <h1>Columnas</h1> <div data-role="navbar"> <ul> <li><a href="#pag1">Dos Columnas</a> <li><a href="#pag2">Tres Columnas</a> </ul> </div> </div> <div data-role="content"> <h2>Tres columnas y dos filas</h2> <div class="ui-grid-b">  <div class="ui-block-a">Col 1.1</div> <div class="ui-block-b">Col 1.2</div> <div class="ui-block-c">Col 1.3</div>  <div class="ui-block-a">Col 2.1</div> <div class="ui-block-b">Col 2.2</div> <div class="ui-block-c">Col 2.3</div> </div> </div>

Uso de Columnas<div data-role="header"> <h1>Columnas</h1> <div data-role="navbar"> <ul> <li><a href="#pag1">Dos Columnas</a> <li><a href="#pag2">Tres Columnas</a> </ul> </div> </div> <div data-role="content"> <h2>Dos columnas y una fila</h2> <div class="ui-grid-a"> <div class="ui-block-a"><p class="marco">Columna1</p></div> <div class="ui-block-b"> <p class="marco"> Columna 2 </p> </div> </div> </div> <div data-role="footer“ data-position="fixed" data-id="pie1" > <h4>www.jquerymobile.com</h4> </div>

background-color: #CCC;height: 50px;margin: 0px;border: thin solid #03C;

}</style>

Uso de Columnas<div data-role="page" data-theme="e" id="pag2"><div data-role="header"> <h1>Columnas</h1> <div data-role="navbar"> <ul> <li><a href="#pag1">Dos Columnas</a> <li><a href="#pag2">Tres Columnas</a> </ul> </div> </div> <div data-role="content"> <h2>Tres columnas y dos filas</h2> <div class="ui-grid-b">  <div class="ui-block-a"> <p class="marco"> Col 1.1</p></div> <div class="ui-block-b"> <p class="marco"> Col 1.2</p></div> <div class="ui-block-c"> <p class="marco"> Col 1.3</p></div>  <div class="ui-block-a"> <p class="marco"> Col 2.1</p></div> <div class="ui-block-b"> <p class="marco"> Col 2.2</p></div> <div class="ui-block-c"> <p class="marco"> Col 2.3</p></div> </div> </div>

Laboratorio 6 – 1/2

Uso de columnas – Cuadrículas

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

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>

Listas – 2/3

Vista de una lista básica

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

Uso de listas

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:

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.

– 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"> </ol>

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

Uso de listas con recuadros

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>

Listas Interactivas – 2/4

Vista de lista con botones

<div data-role="content"> <h3>Unordered List</h3> <ul 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> </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>

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>

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 tocando en uno de esos artículos, se visualizará la sub-lista, y así sucesivamente.

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

Uso de listas anidadas

<li>Bebidas <ul> <li>Bebida 1</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>

Uso de listas anidadas

Uso de listas interactivas anidadas

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"

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

Uso de divisores de listas

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 unode ellos de manera rápida y sencilla.

<div data-role="header" data-theme="b" data-position="fixed"> <h1>Platos Típicos</h1> </div> <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>

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>

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

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

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

Uso de listas con botones dobles

Características

Precio

Uso de listas con botones dobles

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

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

Uso imágenes en listas como íconos

<div data-role="header" data-theme="b" data-position="fixed"> <h1>Platos Típicos</h1> </div> <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>

Uso imágenes en listas como thumbnails

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>

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

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

Uso de número de burbujas

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>

<div data-role="content"> <h4 align="center">Menú</h4> <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>

Uso de contenido relacionado

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>

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

Uso de título y descripción

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ú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"> </ul>

<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

Uso de imágenes y filtro de datos

Características

Precio

Uso de imágenes y filtro de datos

Características

Precio

Características

Precio

Formularios

– jQuery mobile soporta formularios con manejo automático de AJAX. Esa es la primera buena noticia acerca de los controles de formulario..

– Los controles de formulario soportados son input, textarea, radio buttons, checkbox, slider, select, etc.

– Todos los controles se encuentran dentro de un elemento de formulario (form)con un atributo de acción que define la dirección URL que recibirá los datos del formulario.

– Query Mobile mejorará todos los elementos de forma nativa para hacerlos más atractivos y utilizable en dispositivos móviles.<form action="send.php" action="get">

</form>

Formularios – Labels

– Un elemento muy importante del control de todas las formas es la etiqueta. Siempre debe incluir un elemento de indicación en el control de la derecha utilizando el atributo for. Veamos un ejemplo.

<form action="send.php" action="get"> <label for="company">Company Name:</label></form>

Formularios – Text Fields

– jQuery Mobile es compatible con los controles básicos de HTML5 de entrada de texto y los hace de acuerdo con el tema actual y muestra de color. Estos son los campos de entrada de texto disponibles:

– <input type="text">– <input type="password">– <input type="email">– <input type="tel">– <input type="url">– <input type="search">– <input type="number">– <textarea>

<form action="send.php" action="get"> <label for="company">Company Name:</label> <input type="text" id="company" name="company"></form>

Formularios – Text Fields

Uso de nuevos tipos de entrada de texto HTML5

Demostración 35

<div data-role="content"> <form action="" method="get"> <label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre"> </form> </div>

Uso de labels y text fields

Formularios – Field Contain

– Un contenedor es un campo opcional que mejora la experiencia de usuario en pantallas más anchas, como dispositivos tipo tableta.

– Este contenedor es cualquier elemento de bloque con data-role = "fieldcontain“.

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre"> </div> </form> </div>

Demostración 36

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre"> </div> <div data-role="fieldcontain"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </div> </form> </div>

Uso de contenedores de campo

Formularios – Text Area

– Cuando usamos la caja de texto para la entrada de texto de varias líneas, vamos a obtener un servicio de cortesía: auto-creciente.

– jQuery Mobile se inicia con una altura de dos líneas hasta que ingrese el texto que crea una tercera línea. Entonces, la estructura se expande automáticamente el área de texto para adaptarse a la nueva línea.

<div data-role="fieldcontain"> <label for="comen">Comentarios:</label> <textarea id="comen" name="comen></textarea></div

Demostración 37

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre"> </div> <div data-role="fieldcontain"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </div> <div data-role="fieldcontain"> <label for="comen">Comentarios</label> <textarea id="comen" name="comen"></textarea> </div> </form> </div>

Uso de Text Area

Nuevos Atributos de HTML5

– Es seguro usar cualquier atributo HTML 5 en nuestros campos de texto, ya que trabajar en dispositivos compatibles y no hará nada en los navegadores antiguos.

– Dentro de la lista de los nuevos atributos de los controles en los formulario se pueden mencionar los siguientes:• Requeridos• Patrones,• Marcador de posición,• mínima y máxima (útil sólo para <input type="number">).

Demostración 38

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre" required

placeholder="Ingrese su nombre"> </div> <div data-role="fieldcontain"> <label for="edad">Edad:</label> <input type="number" id="edad" required

placeholder="Ingrese su edad" min="10" max="110"> </div> </form> </div>

Uso de nuevos atributos en HTML5

Formularios – Date Fields

– Introducción de fechas en HTML siempre fue un problema y nos acostumbramos a depender de bibliotecas de JavaScript que prestan calendarios visuales usando HTML.

– HTML5 ahora se ha añadido soporte para los campos de fecha a través del elemento de entrada que utilizan los siguientes tipos:

• date para un selector de fecha (día, mes, año)• Datetime para un selector de fecha completa (día, mes, año, hora, minuto) usando la sintaxis

estándar, incluyendo la zona horaria GMT• Time para un selector de tiempo (horas, minutos)• datetime-local un selector de fecha completa, sin información de zona horaria• month un selector de mes (por lo general se representa como una lista desplegable)• week durante una semana del selector de año (por lo general se representa como una lista

desplegable)

Formularios – Date Fields

Desde la versión iOS 5 en adelante, los elementos de fecha son compatibles, por lo que obtendrá un selector de fecha bonita cuando se utiliza este tipo de entrada HTML5

Demostración 39

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="cumple">Cumpleaño</label> <input type="date" id="cumple" name="cumple"> </div> <div data-role="fieldcontain"> <label for="mes">Mes favorito:</label> <input type="month" id="mes" name="mes"> </div> </form> </div>

Uso de Date Fields

Formularios – Slider – 1/2

– Un deslizador es ideal para los valores numéricos dentro de un rango. Cuando se utiliza, se proporciona un campo de texto numérico y un deslizador horizontal a la derecha.

– Para utilizar un deslizador, se debe definir un control de HTML5 <input type="range">. Acepta mínimo, máximo, y el paso de valores:

<div data-role="fieldcontain"> <label for="qty">Cantidad:</label> <input type="range" id="qty" name="qty" min="1" max="100" value="5"></div>

Formularios – Slider – 2/2

– El deslizador es compatible con una muestra de color a través de la definición data-theme que afecta a las teclas numéricas tipo entrada, y también podemos definir una data-track-theme, que sólo afecta a la pista.

<div data-role="fieldcontain"> <label for="qty">Cantidad:</label> <input type="range" id="qty" name="qty" min="1" max="100" value="5" data-theme="e" data-track-theme="b"></div>

Demostración 40

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="qty">Cantidad</label> <input type="range" id="qty" name="qty" min="1" max="100" value="5"> </div> <div data-role="fieldcontain"> <label for="qty">Cantidad:</label> <input type="range" id="qty" name="qty" min="1" max="100" value="5"

data-theme="e" data-track-theme="b"> </div> </form></div>

Uso de Slider

Formularios – Flip Toggle Switch

– Un interruptor de palanca es un selector de valores booleanos (verdadero o falso, encendido o apagado), similar a una casilla en funcionalidad, pero con una interfaz de usuario radicalmente diferente.

– Se hizo como un interruptor visual que puede ser activada o desactivada por el usuario (tocando o arrastrando el cambiar).

– Este es el primer control que necesita un explícito data-role:slider. Se necesita un elemento select con sólo dos opciones: off/false y luego el on/verdadero.

Demostración 41

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="updated">Recibir actualizaciones</label> <select id="updated" name="updated" data-role="slider"> <option value="no">No</option> <option value="yes">Yes</option> </select> </form> </div>

Uso de Slider

Formularios – Select Menus

– Los menús a través de los elementos seleccionados son un control de forma típica para seleccionar uno o varios opciones de una lista desplegable. Cada navegador móvil es compatible selecciona (simple y múltiple selección).

<div data-role="fieldcontain"> <label for="training">Entrenamiento</label> <select id="training" name="training"> <option value="1">HTML5</option> <option value="2">jQuery Mobile</option> <option value=“3">BlackBerry</option> <option value=“4">Flash</option> <option value=“5">Fireworks</option> </select></div>

Demostración 42

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="training">Entrenamiento</label> <select id="training" name="training"> <option value="1">HTML5</option> <option value="2">jQuery Mobile</option> <option value="3">BlackBerry</option> <option value="4">Flash</option> <option value="5">Fireworks</option> </select> </div> </form> </div>

Uso de Select Menus

Demostración 43

<div data-role="content"> <form action="" method="get"> <div data-role="fieldcontain"> <label for="training">Entrenamiento</label> <select id="training" name="training" data-native-menu="false"

multiple> <option value="1">HTML5</option> <option value="2">jQuery Mobile</option> <option value="3">BlackBerry</option> <option value="4">Flash</option> <option value="5">Fireworks</option> <option value="5">DW</option> </select> </div> </form> </div>

Uso de Select Menus con atributo múltiple y opciones de menú no nativas

Formularios – Agrupación de menús

– Los Select Menu pueden agruparse usando el elemento controlgroup, vertical o horizontalmente.

– La última es útil para cortar la longitud de selección, por ejemplo: un grupo de mes / día / año. Para menús agrupados, tenemos que integrar en un div con data-role = "controlgroup"

Demostración 44

<form action="" method="get"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Fecha de nacimiento</legend> <select id="dia" name="dia" data-native-menu="false" > <option >Día</option> <option value=“1">1</option> <option value=“2">2 Mobile</option> </select> <select id="mes" name="mes" data-native-menu="false" > <option>Mes</option> <option value=“1">Enero</option> <option value=“2">Febrero</option> </select> <select id="anio" name="anio" data-native-menu="false" > <option >Año</option> <option value=“1">1978</option> <option value=“2">1980</option> </select> </fieldset> </div> </form>

Agrupación de menú con div y controlgroup

Demostración 45

<form action="" method="get"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Fecha de nacimiento</legend> <select id="dia" name="dia" data-native-menu="false" > <option >Día</option> <option value=“1">1</option> <option value=“2">2 Mobile</option> </select> <select id="mes" name="mes" data-native-menu="false" > <option >Mes</option> <option value=“1">Enero</option> <option value=“2">Febrero</option> </select> <select id="anio" name="anio" data-native-menu="false" > <option >Año</option> <option value=“1">1978</option> <option value=“2">1980</option> </select> </fieldset> </div> </form>

Agrupación de menú con fieldset

Demostración 46

<form action="" method="get"> <div data-role="fieldcontain"> <div data-role="controlgroup" data-type="horizontal"> <legend>Día y Tiempo</legend> <select id="dia" name="dia" data-native-menu="false" multiple> <option >Día</option> <option value="1">Lunes</option> <option value="2">Martes</option> <option value="3">Miércoles</option> <option value="4">Jueves</option> <option value="5">Viernes</option> </select> <select id="tiempo" name="tiempo" data-native-menu="false"> <option value="1">Mañana</option> <option value="2">Tarde</option> <option value="3">Noche</option> </select> </div> </div> </form>

Agrupación de menú con div y controlgroup

Formularios – Radio Buttons

– Todos sabemos lo que es un botón de radio. La gran cosa acerca de los botones de la radio en jQuery Mobile es la forma en que se prestan sin ningún tipo de trabajo de nosotros. En primer lugar, vamos a revisar los requisitos para los botones de radio para que funcione correctamente en jQuery Mobile:

• Cada opción debe ser un <input type="radio“>• Todas las opciones de un mismo grupo debe tener el mismo nombre.• Todas las opciones deben tener un identificador único y un elemento de

etiqueta única que se le aplica.

Demostración 47

<form action="" method="get"> <div data-role="fieldcontain"> <div data-role="controlgroup" > <legend>Seleccione su estado civil</legend> <input type="radio" id="soltero" name="estadoc" value="1"> <label for="soltero">Soltero</label> <input type="radio" id="casado" name="estadoc" value="2"> <label for="casado">Casado</label> <input type="radio" id="divorciado" name="estadoc" value="3"> <label for="divorciado">Divorciado</label> </select> </div> </div> </form>

Uso de Radio Buttons

Formularios – Checkboxes

– Las casillas de verificación funcionan de manera similar a los botones de radio, pero con selección múltiple.

Demostración 48

<form action="" method="get"> <form action="" method="get"> <div data-role="fieldcontain"> <div data-role="controlgroup" > <legend>Seleccione el Género</legend> <input type="checkbox" id="accion" name="accion" checked> <label for="accion">Acción</label> <input type="checkbox" id="comedia" name="comedia"> <label for="comedia">Comedia</label> <input type="checkbox" id="drama" name="drama" > <label for="drama">Drama</label> </select> </div> </div> </form>

Uso de Checkboxes

Yamil Lambert

Gracias.

jqquery mobile por yamil lambert

Education

luciano lambert crescimento de diferentes … · luciano...

violino método - lambert ribeiro

henrique lambert - f3

lambert ribeiro - método de violino[1]

maio 4, 2010 coimbra 1 · lambert azimuthal equal area...

universidade estadual da paraÍba centro de...

01 a disrupção pelo mobile - por mentor neto

lambert ribeiro

a expressão “mobile first” tem sido adotada por marcas...

por quê mobile?

mÉtodo de violino - lambert ribeiro

lambert ribeiro - método de violino

obrigado por adquirir o mobile broadband modem usb e303c....

por que o mobile veio para ficar

briefing da sony mobile por renan almeida pinheiro

mobile, por onde começar

primeiras obras de emÍlio odebrecht histÓria lambert...

sistema de instrumentação de barragens - mobile sibar...

lambert oaks

lei de lambert