Iconos con jQuery Mobile

A lo largo del Manual de jQuery Mobile hemos visto que las capacidades de este framework son realmente sorprendentes. En artículos anteriores se han dado a conocer algunas de las bondades de estas librerías para el desarrollo de sitios web para dispositivos móviles. Hemos relatado el uso de diversos componentes de interfaz gráfica de usuario, pero también existen otros modos interesantes de enriquecer visualmente nuestros widgets.

En este artículo exploraremos una de las formas que ofrece jQuery Mobile para mejorar el diseño de las aplicaciones, de una manera sencilla, a través de iconos que vienen prediseñados dentro del mismo framework. El uso de estos elementos es algo que nos facilita mucho la vida a la hora de desarrollar sitios web, pues podemos hacer interfaces visualmente más atractivas.

Agregar iconos a los componentes de interfaz grafica de usuario

Como hemos tratado de demostrar en artículos anteriores, jQuery Mobile ofrece muchas utilidades, y lo hace de una manera muy fácil. Es el caso de los iconos. Para hacer uso de ellos no es necesario de grandes configuraciones o líneas de código Javascript solo un poco mas de HTML.

Pues bien arranquemos con los iconos. Imaginen que tienen, un botón que nos envía a la página inicial de nuestra aplicación web. Este botón se podría hacer más atractivo y visual si ponemos un icono que represente el fin o el uso que tiene. ¿Cuál seria ese icono? ¿Dónde conseguimos ese icono?

Las dos preguntas o dudas las resuelve jQuery Mobile de manera sencilla. Primero el icono seria una casa que representa el home. Por supuesto, este icono viene incorporado dentro del framework. Respondiendo a la segunda pregunta, para hacer que nuestro botón tenga el icono de la casa, solo se necesita el siguiente código:

<a href="#" data-role="button" data-icon="home" > Inicio</a>

Solo hay que agregar un nuevo atributo data-icon y asignarle el valor de "home". Con esto conseguimos que nuestro botón tenga un pequeño icono de una casa.

Pero eso no es todo, jQuery Mobile dispone de iconos en varios colores y utilizará aquel que mejor se vea con el tema gráfico que estés utilizando en tu aplicación. Supongamos que tu botón tiene el tema "a", con el que conseguimos que elementos como botones sean de color negro. En ese caso el icono será de color blanco, para que resalte. Ahora si tienes el tema "c", que es un color con tono muy bajo, el framework le asignará a nuestro botón un icono más oscuro, siempre acorde al color del tema.

jQuery Mobile cuenta con una larga lista de iconos. Todos se indican a través de distintos valores del atributo data-icon. Algunos ejemplos son los siguientes:

• Flecha hacia la izquierda: data-icon="arrow-l"
• Flecha hacia la derecha: data-icon="arrow-r"
• Flecha hacia arriba: data-icon="arrow-u"
• Flecha hacia abajo: data-icon="arrow-d"
• Eliminar: data-icon="delete"
• Mas: data-icon="plus"
• Menos: data-icon="minus"

Posición de los iconos

Por defecto jQuery Mobile, mostrara los iconos en la parte izquierda del botón, pero esa configuración también se puede alterar a través de un atributo en el código HTML. Podemos observar el siguiente tag:

<a href="#" data-role="button" data-icon="plus" data-iconpos="bottom"> Inicio </a>

Como se puede ver, ahora usamos otro icono, con nombre "plus", además en el código HTML agregamos el atributo data-iconpos="bottom", para poner el icono bajo el texto. Este atributo puede recibir los siguientes valores para posicionar el icono: "top", "left", "right" y "bottom". Sobra la explicación de los resultados que obtendremos con cada uno de ellos.

Además de los valores mencionados anteriormente, el atributo data-icon-pos puede recibir un quinto valor, el cual es: "notext", con el que eliminamos el texto de nuestro botón y solo aparecerá el icono que le hayamos asignado.

Ahora crearemos un botón que solo tendrá nuestro icono, es decir, no aparecerá el texto. Lo agregaremos dentro del header, con el fin de obtener un botón parecido al de la documentación de jQuery Mobile, algo que conseguimos con el siguiente código:

<a href="#" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Inicio</a>

Como pueden ver, no solo lo dejamos sin texto, también le asignamos la clase CSS "ui-btn-right" con el fin de que aparezca a la derecha del header. Todo esto viene prediseñado en el framework, solo debemos usarlo, a través del HTML.

Dónde situar los archivos de los iconos jQuery Mobile

Los iconos son archivos gráficos y por tanto, para que se vean en tu sitio web, tendrán que estar en algún lugar accesible por el navegador. En principio esa localización puede variar, atendiendo a dos posibles usos del framework.

1. Si estas trabajando con jQuery Mobile dentro de tu mismo servidor o de forma local (es decir, entraste a su web http://jquerymobile.com, bajaste el zip del framework para incluirlo en tus páginas), verás que dentro de la descarga hay una carpeta llamada "images", la cual debes incluir dentro del directorio de tu servidor donde has colocado el estilo CSS de jQuery Mobile. (El archivo de hojas de estilo de jQuery Mobile se llama algo como jquery.mobile-1.0.min.css).
2. Si estas trabajado con el CDN de jQuery Mobile, es decir, estás incluyendo tanto los estilos como los scripts Javascript a partir de la ruta absoluta del propio dominio del framework, no necesitas incluir las imágenes en ningún lugar. Es decir, los iconos se accederán directamente desde el servidor de jQuery Mobile y por tanto no necesitas copiarlos en tu espacio de hosting.

Poniendo todo junto

Para facilitar un poco las cosas voy a dejar un código HTML, con una pagina web de ejemplo donde se usa todo lo explicado en este articulo. Debo mencionar que esta web, no hace nada especial solo demuestra el funcionamiento de los icono y todo lo expuesto en el presente articulo.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Iconos 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" data-theme="b">
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Inicio</a>
<h1>Uso de iconos con jQuery Mobile</h1>
</div>
<div data-role="content" data-theme="c">

<a href="#" data-role="button" data-icon="home" >Inicio</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="bottom">Inicio</a>

</div>
<div data-role="footer" data-theme="b">
<h3>Uso de iconos con jQuery Mobile</h3>
</div>
</div>
</body>
</html>

El ejemplo en marcha se puede ver en una página aparte.

Para terminar te invito a modificar el código y obtener diferentes posiciones de los iconos, además de probar otras imágenes de las que ofrece el framework.