jQuery Mobile (V) - Probemos algunos elementos
septiembre 04, 2012
Retomamos la serie jQuery Mobile. Aquí tenéis los capítulos anteriores:
Venga, alegrad esa cara, poned vuestros dedos en el teclado, que hoy va a ser muy divertido. Hoy vamos a realizar unos pequeños ejercicios en el que usaremos algunos elementos de jQuery Mobile, para ello recomiendo unos pequeños requisitos previos.
1. Leer los post anteriores sobre jQuery Mobile, aunque sea por encima. ¡Venga no seas vaguete!
2. Tener un editor de texto a mano (notepad, textedit...) aunque siempre es bueno que uséis un editor de código HTML. UltraEdit y similares van bien para nuestros propósitos.
3. Esta es fácil: Podéis probar los ejercicios que hagamos en el navegador. Recomiendo Google Chrome, Safari o Firefox (preferiblemente los dos primeros).
Si has leído hasta aquí entiendo que cumples los requisitos o eres un valiente y/o curioso programador. Voy a proponer cuatro ejercicios:
Ejercicio 1. Crearemos la estructura principal de la aplicación, que albergará todo el código necesario para albergar nuestros componentes.
Ejercicio 2. Veremos ejemplos de elementos que se pueden usar para gestionar el contenido, listas, columnas, cabeceras…
Ejercicio 3. Veremos unos cuantos botones que nos pueden venir bien para desarrollar.
Ejercicio 4. Y por último veremos los elementos que se usan en los formularios (inputs, textarea, slider…)
¡Comenzamos!
Ejercicio 1. Crearemos la estructura principal de la aplicación, que contendrá todo el código necesario para albergar nuestros componentes.
Paso 1. Abre tu editor de texto favorito. Vamos a escribir las la cabecera, el contenido y el pié de página de la aplicación en jQM:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div id="list" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Lista de elementos UI</h1>
</div>
<div data-role="content">
<ul data-role="listview">
</ul>
</div>
</div>
¿Qué hemos hecho?: En la cabecera hemos declarado que usaremos una aplicación con jQuery Mobile, donde damos una serie de dimensiones a la aplicación. El contenido (content) tiene una lista (list view) y no vamos a definir pié de página. ¿Fácil no?
Paso 2 Ahora vamos a pegar dentro de la lista el siguiente código, quedando algo así:
------- ……. ------- (Cuando pongo esto, significa que hay código por esos lares).
<ul data-role="listview">
<li><a href="#contenido">Ejemplos de contenido</a></li>
<li><a href="#botones">Botones de ejemplo</a></li>
<li><a href="#formulario">Elementos del formulario en un ejemplo</a></li>
</ul>
------- ……. -------
¿Qué hemos hecho?: Hemos declarado tres enlaces que nos llevaran a páginas en las que vamos a probar los elementos. Recordad que tal y como dije en el capítulo III de esta serie que una característica de jQuery Mobile es que se puede usar la multipágina.
Ahora ya puedes ejecutar tu aplicación y debería salirte algo como lo siguiente:
Ejercicio 2. Veremos ejemplos de elementos que se pueden usar para gestionar el contenido, listas, columnas, cabeceras…
Paso 1. Añadiendo la estructura de la siguiente página:
<div id="contenido" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Ejemplo de contenido</h1>
</div>
<div data-role="content">
</div>
</div>
¿Qué hemos hecho?: Fácil, de momento solo hemos creado la estructura de la siguiente página.
Paso 2. Colocamos las cabeceras y sub cabeceras:
------- ……. -------
<h1>Ejemplo de contenido</h1>
</div>
<div data-role="content">
<h1>Cabecera</h1>
<h2>Sub Cabecera</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
¿Qué hemos hecho?: De momento solo llevamos dos cabeceras insertadas, la cabecera normal (h1), la sub cabecera(h2) y un pequeño párrafo(p).
Paso 3. Añadimos una lista colapsable:
------- ……. -------
<h1>Cabecera</h1>
<h2>Sub Cabecera</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div data-role="collapsible">
<h1>Lista colapsable</h1>
<p>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
¿Qué hemos hecho?: Añadir una lista que se podrá desplegar, ofreciéndonos la posibilidad de ocultar información al usuario.
Paso 4. Insertamos una lista simple:
------- ……. -------
<h1>Lista colapsable</h1>
<p>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h3>Lista simple</h3>
<ul data-role="listview" data-inset="true">
<li>Fila 1</li>
<li>Fila 2</li>
<li>Fila 3</li>
</ul>
</div>
</div>
¿Qué hemos hecho?: Añadir una lista que mostrará siempre sus elementos.
Paso 5. Insertamos unas columnas:
------- ……. -------
<li>Fila 2</li>
<li>Fila 3</li>
</ul>
<h3>Columnas</h3>
<div class="ui-grid-a">
<div class="ui-block-a">
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</div>
<div class="ui-block-b">
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
¿Qué hemos hecho?: Insertar la posibilidad de dividir nuestro texto en varias columnas.
Juntando todo, nos quedaría:
<div id="contenido" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Ejemplo de contenido</h1>
</div>
<div data-role="content">
<h1>Cabecera</h1>
<h2>Sub Cabecera</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div data-role="collapsible">
<h1>Lista colapsable</h1>
<p>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<h3>Lista simple</h3>
<ul data-role="listview" data-inset="true">
<li>Fila 1</li>
<li>Fila 2</li>
<li>Fila 3</li>
</ul>
<h3>Columnas</h3>
<div class="ui-grid-a">
<div class="ui-block-a">
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
</div>
<div class="ui-block-b">
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
Recordad que va justo debajo del Ejercicio 1. Una vez ejecutemos la web y entremos en la opción de "Ejemplo de contenido" veremos algo así:
Ejercicio 3. Veremos unos cuantos botones que nos pueden venir bien para desarrollar.
Paso 1. Como en el Ejercicio 2, vamos a crear la estructura de nuestra nueva página que albergará los botones de ejemplo: Justo debajo de todo lo anterior pegad:
<div id="botones" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Ejemplo de botones</h1>
</div>
<div data-role="content">
</div>
</div>
¿Qué hemos hecho?: De verdad quieres que lo explique, ¡si ya sabes más que yo seguro!
Paso 2. Ahora vamos a poner todos los botones a porrillo:
------- ……. -------
<h1>Ejemplo de botones</h1>
</div>
<div data-role="content">
<a href="#list" data-role="button">Link</a>
<a href="#list" data-role="button" data-icon="star">Icono</a>
<a href="#list" data-role="button" data-inline="true">En pequeño</a>
<div data-inline="true">
<a href="#list" data-role="button" data-inline="true">Misma</a>
<a href="#list" data-role="button" data-inline="true">Línea</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#list" data-role="button">Si</a>
<a href="#list" data-role="button">No</a>
<a href="#list" data-role="button">Puede ser...</a>
</div>
</div>
</div>
¿Qué hemos hecho?: Hemos añadido botones que su propia descripción nos dice de que se trata, excepto el "controlgroup" que quizás pueda parecer algo distinto. Este nos da opciones a elegir, algo así como radio button´s(para los que ya sabéis programar), pero en forma de botón.
Junto quedaría:
<div id="botones" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Ejemplo de botones</h1>
</div>
<div data-role="content">
<a href="#list" data-role="button">Link</a>
<a href="#list" data-role="button" data-icon="star">Icono</a>
<a href="#list" data-role="button" data-inline="true">En pequeño</a>
<div data-inline="true">
<a href="#list" data-role="button" data-inline="true">Misma</a>
<a href="#list" data-role="button" data-inline="true">Línea</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#list" data-role="button">Si</a>
<a href="#list" data-role="button">No</a>
<a href="#list" data-role="button">Puede ser...</a>
</div>
</div>
</div>
Una vez accedamos desde el menú a "Ejemplo de botones", quedaría algo tal que así:
Ejercicio 4. Y por último veremos los elementos que se usan en los formularios (inputs, textarea, slider…)
Paso 1. Como siempre creamos la estructura principal:
<div id="formulario" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Formulario de ejemplo</h1>
</div>
<div data-role="content">
</div>
</div>
¿Qué hemos hecho?: Crear la estructura principal, como bien sabéis.
Paso 2. Añadimos el formulario y sus componentes:
------- ……. -------
<div data-role="content">
<div data-role="fieldcontain">
<label for="input">Input:</label>
<input type="text" id="input" placeholder="input" />
<label for="textarea">Textarea:</label>
<textarea rows="4" id="textarea"></textarea>
<label for="slider">Slider:</label>
<input type="range" id="slider" value="0" min="0" max="100" />
<div data-inline="true">
<label for="toggle">Toggle:</label>
<select id="toggle" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<label for="select">Seleccionar:</label>
<select id="select">
<option>Op. 1</option>
<option>Op. 2</option>
<option>Op. 3</option>
</select>
</div>
</div>
</div>
¿Qué hemos hecho?: Por una parte hemos añadido un formulario (fieldcontain) y dentro hemos puesto los elementos con los que se trabaja, los textarea, el inputext, un slider, un toggle y un select. Una imagen vale más que mil palabras así que os aconsejo probarlo.
Todo junto quedaría (aunque obvio):
<div id="formulario" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Formulario de ejemplo</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="input">Input:</label>
<input type="text" id="input" placeholder="input" />
<label for="textarea">Textarea:</label>
<textarea rows="4" id="textarea"></textarea>
<label for="slider">Slider:</label>
<input type="range" id="slider" value="0" min="0" max="100" />
<div data-inline="true">
<label for="toggle">Toggle:</label>
<select id="toggle" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<label for="select">Seleccionar:</label>
<select id="select">
<option>Op. 1</option>
<option>Op. 2</option>
<option>Op. 3</option>
</select>
</div>
</div>
</div>
Se pega justo debajo de todo lo demás. Ahora accedemos desde el menú principal a la opción de la lista "Elementos del formulario en un ejemplo" y debería quedar algo así:
Podéis descargar el código completo pinchando aquí.
Por hoy hemos terminado, espero que os haya gustado más que otros post y perdonad si no introduzco el código en cajas pero el widget que lo hace no se lleva bien con jQuery Mobile y salen unas cosas muy raras.
En la siguiente veremos como funciona el formulario con jQM.
4 comentarios
Muy buena Javi :-P
ResponderEliminarPD: Pon los enlaces del blog en otro color o subrayados! :D
y estos aun no estan
ResponderEliminarjQuery Mobile (VI) - Trabajando con formularios
jQuery Mobile (VII) - Aplicaciones MultiIdioma
jQuery Mobile (VIII) - Temas Visuales
jQuery Mobile (IX) - Trabajando Offline
jQuery Mobile (X) - Creando la aplicación
no los veo
Si, si, paciencia, poco a poco iré subiendo nuevas entradas!
ResponderEliminarEstad atentos :)
Hola. Soy nueva en el tema y estoy desarrollando una aplicación en jquery mobile pero no se como sacar el ejecutable(.exe). Agradecería cualquier ayuda que me puedan ofrecer..
ResponderEliminarSé respetuoso/a, en este blog caben todo tipo de opiniones con respeto y serenidad.