JQquery Mobile por Yamil Lambert

Desarrollo de
aplicaciones móviles
con
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 funcione
en todas partes
y para todos

Introducción
Una alternativa a jQuery. De hecho jQuery
Mobile utiliza a jQuery.
Un SDK/compilador para apps
Un 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 base
Un archivo JavaScript y Css por componente
Un 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“ >

</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>
Page
Header
Content
Footer

Demostración 1
< body>
<div data-role="page">
<h1>jQuery mobile</h1>
</div>
<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">
</div>
<div data-role="footer“data-theme=“b">
</div>
</div>

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

Demostración 2
< body>
<div data-role="page“ data-theme="e">
<div data-role="header“ data-theme=“c">
</div>
<p> Este es un texto dentro de una
página</p>
</div>
<div data-role="footer“ data-theme=“b">
</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>
<a href="#" data-role="button" data-
theme="d">Aceptar</a>
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">
<h1>Botones</h1>
</div>
theme="d“ data-inline="true">Aceptar</a>
theme="a“ data-inline="true">Cancelar</a>
</div>
</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">
........
<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">
.........
<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">
<h1>Página Interna</h1>
</div>
<a href="#pagina2" data-role="button">Ir
hacia página 2</a>
</div>
</div>
</div>
 Uso de Páginas Internas – 1/2

Demostración 5
id="pagina2" data-add-back-btn="true">
<h1>Segunda Página</h1>
</div>
<p>Esta es la segunda página</p>
<p><a href="#pagina1" data-
rel="back">Volver</a></p>
</div>
</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“ >
........
<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“ >
.........
<p>Yo soy otro documento HTML</p>
</div>
pagina2.html

Demostración 6
<div data-role="page" data-theme="b“ >
<h1>Página Externa</h1>
</div>
<a href="demo6_pagexterna2.html" data-
role="button">Ir página externa</a>
</div>
</div>
</div>
 Uso de Páginas Externas – 1/2

Demostración 6
<div data-role="page" data-theme="b" >
<h1>Página Externa</h1>
</div>
Yo soy otro documento HTML</a>
</div>
</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“ >
........
<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
<h1>Link Absoluto</h1>
</div>
<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>
</div>
</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">
<h1>Transiciones</h1>
</div>
<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>
</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 atributo
data-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
id="pagina1">
<h1>Diálogo</h1>
</div>
<p> Estas por eliminar algo importante </p>
<a href="#confirmacion" data-role="button" data-
rel="dialog">Eliminar</a>
</div>
</div>
</div>

 Uso de Cuadros de Diálogo
id="confirmacion" >
<h1>Eliminar</h1>
</div>
<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
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.
<h1>jQuery Mobile</h1>
<a href="#page2“>Link</a>
</div>

Demostración 10
 Uso de botones en la cabecera
<a href="#pagina2" data-theme="a">Cancelar</a>
<a href="#pagina2" data-role="none">Grabar</a>
</div>
<p>Esto es un texto dentro de una página</p>
</div>
</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>
</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>
</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
<h1>Botones</h1>
<a href="#pagina2" data-theme="a" >Cancelar</a>
</div>
<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“ >
</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>
</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-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
Íconos personalizados
En 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
<div data-role="page" data-theme="b" data-
fullscreen="true" >
<div data-role="header" data-theme="e" data-
position="fixed">
<a href="#pagina2" data-theme="a"
>Cancelar</a>
<a href="#pagina2" >Comenzar</a></div>
<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">
<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">
<ul>
</ul>
</div>
</div>
<div data-role="content">Escribir.......</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<ul>
Lo mismo que la cabececa
……………………………..
</div>
 Uso de Barra de navegación

Demostración 17
<ul>
</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">

Pie de página persistente– 2/3
El uso de pie de página persistentes

 Uso de pie de página persistente

<div data-role="page" data-theme="b" id="home1">
</div>
<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">
<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>

<div data-role="page" id="contacts1">
</div>
Contenido
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="pie1">
<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 Internas
Pá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="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

 Uso de contenido colapsable
<div data-role="page”>
<div data-role="header“>
<h1>Colapsable</h1>
</div>
<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“ >
</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="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.

 Uso de Acordeón
<div data-role="page”>
<div data-role="header“>
<h1>Colapsable Set</h1>
</div>
<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“ >
</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 class="ui-grid-a">
<div class="ui-block-a">Column 1</div>
<div class="ui-block-b">Column 2</div>
</div>
</div>
<div class="ui-grid-b">

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

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

 Uso de Columnas
<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>
<h2>Dos columnas y una fila</h2>
<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" >
</div>

 Uso de Columnas
<div data-role="page" data-theme="e" id="pag2">
<h1>Columnas</h1>
<ul>
</ul>
</div>
</div>
<h2>Tres columnas y dos filas</h2>

<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
<h1>Columnas</h1>
<ul>
</ul>
</div>
</div>
<h2>Dos columnas y una fila</h2>
<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" >
</div>
.marco {
background-color: #CCC;
height: 50px;
margin: 0px;
border: thin solid #03C;
}
</style>

 Uso de Columnas
<div data-role="page" data-theme="e" id="pag2">
<h1>Columnas</h1>
<ul>
</ul>
</div>
</div>
<h2>Tres columnas y dos filas</h2>

<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

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

<h2 align="center">Cursos</h2>
<li>jQuery Mobile
<li>Dreamweaver
<li>Fireworks
<li>jQuery
</ul>
<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áticamente
dentro de un bloque con esquinas redondeadas y tiene márgenes
establecidos para el espacio adicional.
– Permite tener contenido antes y después.
– Para definirlas, sólo tiene que añadir los data-inset= "true" a los elementos
UL como OL.
<ol data-role="listview" data-inset="true">

</ol>

<ul data-role="listview“ data-inset="true" >
<li>jQuery Mobile
<li>Dreamweaver
<li>Fireworks
<li>jQuery
</ul>
<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.
<li><a href="#">Item</a></li>
</ul>
</ol>

Listas Interactivas – 2/4
Vista de lista con botones

<li><a href="#it1">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
<li><a href="#it1">Item 1</a></li>
</ol>
</div>
 Uso de listas interactivas

<div data-role="page" id="it1" data-add-back-btn="true">
<h1>List.Interactivas</h1>
</div>
<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">
</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.

<h3 align="center">Pike+</h3>
<li>Postres
<ul>
<li>Postre 1</li>
<li>Postre 2</li>
<li>Postre 3</li>
<li><a href="#pag1" data-rel="back">Volver</a></li>
</ul>
</li>
<li>Platos Fuertes
<ul>
<li>Plato 1</li>
<li>Plato 2</li>
<li>Plato 3</li>
</ul>
</li>
 Uso de listas anidadas

<li>Bebidas
<ul>
<li>Bebida 1</li>
<li>Bebida 2</li>
<li>Bebida 3</li>
</ul>
</li>
</ul>
</div>
</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"

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

<h1>Platos Típicos</h1>
</div>
<li><a href="#deta1">Caldo de bolas</a>
<a href="#precio1">Precio</a>
<li><a href="#deta2">Caldo de Manguera</a>
</ul>
</div>
</div>
 Uso de botones dobles

<div data-role="page" id="deta1" data-add-back-btn="true">
<h1>Caldo de bolas</h1>
</div>
<h4>INGREDIENTES </h4>
<p>1 ½ libra de hueso 5 verdes crudos 2 hojas de col 1 pimiento ½
cucharadita de pimienta y comino 1 cucharada de perejil 5 verdes
cocinados ½ libra de carne molida 1csebolla paiteña 3 dientes de ajo ½.
</p>
</div>
</div>

<div data-role="page" id="precio1" data-add-back-btn="true">
<h1>Caldo de bolas</h1>
</div>
<h4><b>Precio:</b> $ 5 </h4>
</div>
</div>

<div data-role="page" id="deta2" data-add-back-btn="true">
<h1>Caldo de Manguera</h1>
</div>
<p>El caldo de manguera es una receta típica de la gastronomía
ecutoriana y con mucha historia. </p>
<h4>INGREDIENTES:</h4>
<p> 2 tazas de sangre de Chancho, 1 col, la mitad cocida, y la otra
mitad cruda, menudencias e intestinos de chancho, 1 pimiento.</p>
</div>
</div>

<div data-role="page" id="precio2" data-add-back-btn="true">
<h1>Caldo de Manguera</h1>
</div>
<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.

<h1>World Cup</h1>
</div>
<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>
 Uso imágenes en listas como íconos

<h1>Platos Típicos</h1>
</div>
<li><a href="#deta1"> <img src="images/cbola.jpg"> Caldo de
bolas</a>
<li><a href="#deta2"> <img src="images/csalch.jpg"> Caldo de
Manguera</a>
</ul>
</div>
</div>
 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>
<h4 align="center">Cursos Interactivos</h4>
<ul data-role="listview" data-inset="true">
<li><a href="#">Diseño</a>
<ul data-inset="true">
<li>Photoshop</li>
<li>Illustrator</li>
<li>Fireworks</li>
</ul>
</li>
 Uso de número de burbujas

<li><a href="#">Programación</a>
<li>C# .net</li>
<li>Java</li>
</ul>
</li>
<li><a href="#">Ofimática</a>
<li>Word 2010</li>
</ul>
</li>
</ul>
</div>
<h4>www.jquerymobile.com</h4></div>/div>
 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.
<li><a href=“#">Soda</a>
<span class="ui-li-aside">$1.00</span>
<li><a href=“#">Sandwich</a>
<li><a href=“#">Ice cream</a>
</ul>

<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
<li><a href="#">Ice Cream
</ul>
</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.
<li><a href="#">
<h3>Bebida</h3>
<p>Elige tu refresco favorito </p>
</ul>

<li><a href="#">
<h3>Bebida</h3>
<li><a href="#">
<h3>Sandwich</h3>
<p>Jamón y Queso, jamón y huevo o atún</p>
<li><a href="#">
<h3>Helado</h3>
<p>Chocolate, vainilla o fresa</p>
</ul>
</div>
 Uso de 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úsqueda
se ve muy bien, con un icono de búsqueda en el lado izquierdo, un
marca de agua texto de sugerencia, esquinas redondeadas, y un botón de
borrado en el lado derecho.
– Se puede buscar en el elemento UL como OL y agregar data-filter="true"
<ul data-role="listview" data-filter="true">

</ul>

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-
placeholder="Buscar" >
<li><a href="#">
<h3>Bebida</h3>
<li><a href="#">
<h3>Sandwich</h3>
<p>Jamón y Queso, jamón y huevo o atún</p>
<li><a href="#">
<h3>Helado</h3>
<p>Chocolate, vainilla o fresa</p>
</ul>
</div>
 Filtrado de datos con búsqueda

 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.
<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>
<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
<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="fieldcontain">
</div>
</form>
</div>

Demostración 36
</div>
<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.
<label for="comen">Comentarios:</label>
<textarea id="comen" name="comen></textarea>
</div

Demostración 37
</div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<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
<input type="text" id="nombre" name="nombre" required
placeholder="Ingrese su nombre">
</div>
<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
<label for="cumple">Cumpleaño</label>
<input type="date" id="cumple" name="cumple">
</div>
<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:
<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.
<input type="range" id="qty" name="qty" min="1" max="100" value="5" data-theme="e"
data-track-theme="b">
</div>

Demostración 40
<label for="qty">Cantidad</label>
<input type="range" id="qty" name="qty" min="1" max="100" value="5">
</div>
<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.
<select id="updated" name="updated" data-role="slider">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>

Demostración 41
<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).
<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
<select id="training" name="training">
<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
<select id="training" name="training" data-native-menu="false"
multiple>
<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
<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>
</select>
</fieldset> </div> </form>
 Agrupación de menú con div y controlgroup

Demostración 45
<fieldset data-role="controlgroup">
<legend>Fecha de nacimiento</legend>
<select id="dia" name="dia" data-native-menu="false" >
<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>
</select>
</fieldset> </div> </form>
 Agrupación de menú con fieldset

Demostración 46
<div data-role="controlgroup" data-type="horizontal">
<legend>Día y Tiempo</legend>
<select id="dia" name="dia" data-native-menu="false" multiple>
<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
<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
<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

Recomendados

Recomendados

Más contenido relacionado

Similar a JQquery Mobile por Yamil Lambert

Similar a JQquery Mobile por Yamil Lambert (20)

Más de Yamil Lambert

Más de Yamil Lambert (20)

Último

Último (20)

JQquery Mobile por Yamil Lambert