Como venimos adelantando a lo largo de los anteriores artículos del Manual de jQuery Mobile, este framework ofrece una amplia gama de widgets o componentes de interfaz gráfica de usuario (GUI). Dichos componentes van más allá de los convencionales ofrecidos en HTML 5 y aunque es verdad que han tenido grandes mejoras con respecto a las versiones anteriores del lenguaje de la web, son todavía sobrepasados en calidad y variedad por los que podemos crear a través de jQuery Mobile.

Es por ello que jQuery Mobile ofrece una alternativa muy divertida de enriquecer visualmente nuestras aplicaciones web para móviles, a través de toda una cantidad de formas y efectos que vienen prediseñados en el framework. Lo mejor es que podemos acceder a todo esto de manera muy fácil, lo que nos permitirá crear con extraordinaria sencillez GUIs visualmente más atractivas.

En este articulo, y en otros que publicaremos en breve, estudiaremos las formas en que se pueden crear, personalizar y trabajar con componentes de interfaz grafica de usuario. De momento nos iniciaremos con la creación de botones, que son unos de los elementos más usados en cualquier aplicación, ya sea para la web o para escritorio. Veremos que jQuery Mobile nos ofrece una alternativa para crear botones de estética atractiva y fácil de implementar en nuestros proyectos, aplicaciones web o sitios para móviles.

Un Botón simple de jQuery Mobile

jQuery Mobile ofrece una manera simple de crear nuestros botones, a partir de una serie de propiedades o atributos que vienen predeterminados en el framework. Lo más destacable es que, para lograr nuestro objetivo, solo necesitamos pocas líneas de código y además, todo en HTML.

Si recordamos un poco sobre lo que hemos aprendido en desarrolloweb.com sobre de jQuery UI para crear un botón lo, cual no era muy difícil, primero necesitábamos un código HTML como el siguiente:

<a href="#" id ="boton" > Este es my buttton simple jQUI</a>

El cual es un simple enlace, el cual se referencia a través del id “botón”, pero que jQuery UI con ayuda de algo de javasScript lo convertía en un bonito botón, dicho script sería algo como el siguiente:

$("#boton").button();

Ahora bien, en el caso de jQuery Mobile no se requiere crear scripts para implementar nuestros botones. Eso lo hacemos de forma directa en nuestro documento o código HTML. Se logra con código como el siguiente:

<a href="#" id ="boton" data-role="button" >Este es my buttton simple con jQM</a>

Como podemos ver fue muy fácil crear nuestro botón. Solo tuvimos que asignarle el valor de “button” al atributo data-role de nuestro enlace, algo que podemos hacer sobre un botón creado a través de la etiqueta input lo cual sería algo como esto:

<input type="button" data-role="button" value="Boton input"/>

Es decir que fácilmente podemos hacerlo de forma directa sobre nuestros submit para enviar formularios a un servidor, lo que nos ayudaría a salir del clásico y convencional botón HTML, eso lo logramos con la siguiente línea de código:

<input type="submit" data-role="button" value="Boton input con type submit"/>

Modificar las propiedades por defecto de los botones de jQuery Mobile

Una de las cosas que pasan con los botones es que, por defecto, ocupan todo el ancho de la pantalla, sin importar la resolución de la misma, pero en ciertos momentos no queremos hacer eso. Existe una manera muy simple de crear botones que se ajusten a la tamaño del texto que llevan dentro y al igual que en la creación del botón por defecto, solo necesitamos modificar algunos atributos en el mismo código HTML. Podemos conseguirlo con el siguiente código:

<a href="#" data-role="button" data-inline="true" >Tiene el mismo ancho del texto</a>

Como se puede observar solo tuvimos que modificar el atributo data-inline y asignarle el valor a true con el fin que el botón se limite al tamaño del texto.

Otras de las cosas que se pueden hacer con los botones es cambiar sus colores, con el fin de no quedarnos con los que vienen de manera predeterminada. Como todo en jQuery Mobile, se hace de manera muy simple, rápida ycon un grado de eficiencia muy alto.

Es decir, que si lo que queremos es tener un boton con diferentes colores, tendríamos que escribir un atributo más a nuestros botones, dicho código puede ser el siguiente:

<a href="#" data-role="button" data-inline="true" data-theme="e" >Este boton es de otro color</a>

Lo que hicimos fue agregar el atributo data-theme al cual le damos el valor de “e” atribuyéndole un tema nuevo a nuestro botón. Dichos temas van de la “a” hasta la “e”. Como podemos hacernos a la idea, cada tema de tendrá unos colores diferentes. Por ejemplo, si probamos el siguiente código:

<input type="submit" data-role="button" value="submit con otro color" data-theme="b"/>

Obtenemos un botón con un muy atractivo color azul, el cual equivale al darle el valor de “b” al tributo data-theme. Todo esto nos comprueba que hacer interfaces graficas de usuario que visualmente sean atractivas, es una tarea que se puede hacer en jQuery Mobile con cierto grado de facilidad.

Para mayor claridad le dejo un código de una página web la cual contiene todo lo explicado en este artículo, con el cual espero que aclaren algunas dudas que hayan quedado en el aire:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Botones con jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Botones</h1></div>
   <div data-role="content">
<a href="#" id ="boton" data-role="button" >Este es my buttton</a>
   <input type="button" data-role="button" value="Boton input"/>
   <input type="submit" data-role="button" value="Boton input con type submit"/>
   <a href="#" data-role="button" data-inline="true" >Tine el mismo ancho del texto</a>
   <a href="#" data-role="button" data-inline="true" data-theme="e" >Este boton es de otro color</a>
   <input type="submit" data-role="button" value="submit con otro color" data-theme="b"/>
   </div>
   <div data-role="footer"><h3>Botones</h3>
</div>
</body>
</html>

También podemos ver este código funcionando en un ejemplo ya construido.

Espero que se diviertan con jQuery Mobile!! De momento lo dejamos hasta una próxima ocasión, donde hablaremos de cómo hacer listas más atractivas con este framework. No olviden dejar comentarios y apuntes sobre este artículo.