jqquery mobile por yamil lambert
TRANSCRIPT
Desarrollo de aplicaciones móviles
con
Msg. Yamil Lambert
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>
<head> <link rel="stylesheet" href="jquery.mobile.css"/> <script src="jquery.js"></script> <script src="jquery.mobile.js"></script></head><body></body>
</html>
Roles
– 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 data-role="page“ > <!--/ContenidodelapaginajQuerymobile-->
</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
Temas
– 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>
<div data-role="footer“data-theme=“b">
<h4>www.jquerymobile.com</h4> </div></div>
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>
</div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>
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
página 2</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="page" data-theme="b" id="pagina1">
<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="page" data-theme="b" id="pagina2" data-add-back-btn="true">
<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>
</div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>
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:[email protected]" data-role="button" >Email</a>
<a href="tel:12345678" data-role="button">Llamar</a>
</div> <div data-role="footer" data-theme="b"> <h4>(C) Ylambert2015</h4> </div> </div>
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>
Demostración 9 – 2/2
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
• El trabajo será calificado y es individual.• Tiempo: 5 minutos para realizar el trabajo.
Slide Up
Pop
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>
<a href="#page2“>Link</a></div>
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 {
background-image: url(images/reloj.png); }</style>
2. Aplicar el nuevo estilo. Ejemplo
<a href="#" data-icon="myapp-reloj">Hora</a>
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>
<style type="text/css">.ui-icon-myapp-reloj {
background-image: url(images/reloj.png);
}.ui-icon-myapp-correo {
background-image: url(images/mail.png);
}</style>
Laboratorio 3
Uso de íconos personalizados en botones
• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
Í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>
Demostración 15
<div data-role="page" data-theme="b" data-fullscreen="true" >
<div data-role="header" data-theme="e" data-position="fixed">
<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.
Barras de Navegación – 2/3
Aquí podemos ver una barra de navegación dentro de un encabezado y un pie de página
Barras de Navegación – 3/3
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.
<div data-role="footer" data-id="main" position="fixed">
Demostración 18 – 2/3
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>
Demostración 18 – 3/3
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
• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
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"
<div data-role="content"> <div data-role="collapsible“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
Demostración 19 – 3/3
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.
<div data-role="content"> <div data-role="collapsible-set”>
<div data-role="collapsible“data-collapsed="false">
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.
Demostración 20 – 3/3
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
• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
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>
<div data-role="content"> <div class="ui-grid-b"> <!-- Row 1 --> <div class="ui-block-a">Cell 1.1</div> <div class="ui-block-b">Cell 1.2</div> <div class="ui-block-c">Cell 1.3</div> <!-- Row 2 --> <div class="ui-block-a">Cell 2.1</div> <div class="ui-block-b">Cell 2.2</div> <div class="ui-block-c">Cell 2.3</div> </div></div>
Demostración 21 – 3/4
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>
Demostración 21 – 4/4
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"> <!--Fila 1 --> <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> <!--Fila 2 --> <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>
Demostración 22 – 1/2
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>
<style type="text/css">.marco {
background-color: #CCC;height: 50px;margin: 0px;border: thin solid #03C;
}</style>
Demostración 22 – 2/2
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"> <!--Fila 1 --> <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> <!--Fila 2 --> <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
• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
Laboratorio 6 – 2/2
Uso de columnas – Cuadrículas
• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
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>
Demostración 23 – 3/3
<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"> <!-- 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>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>
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> <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
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><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>
Uso de listas interactivas
Uso de listas interactivas
Laboratorio 7 – 2/2
• 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.
– 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.
Demostración 26 – 2/3
<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
Demostración 26 – 3/3
<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
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"
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> <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.
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"> <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
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> </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>
Uso de botones dobles
Demostración 28 – 4/6
<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>
Uso de botones dobles
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> </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>
Uso de botones dobles
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> </div> <div data-role="content"> <h4><b>Precio:</b> $ 4.0 </h4> </div></div>
Uso de botones dobles
Uso de listas con botones dobles
Laboratorio 9 – 2/2
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.
Demostración 29 – 2/3
<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
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"> <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>
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> <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
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> <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>
Demostración 32 – 2/2
<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>
Demostración 33 – 2/2
<div data-role="content"> <h4 align="center">Menú</h4>
<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"> <!-- list rows --></ul>
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" >
<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
Laboratorio 10 – 2/2
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>
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.
<div data-role="fieldcontain"> <select id="updated" name="updated" data-role="slider"> <option value="no">No</option> <option value="yes">Yes</option> </select></div>
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
