Uso de barras de herramientas con jQuery Mobile

Las barras de herramientas son elementos que en la actualidad han tomado un papel fundamental como base  de  las estructuras  de  diseño  web.  Parte  de  su  popularidad  viene  como  consecuencia  de  su flexibilidad en diseño y facilidad de adaptación a distintos entornos.

Dichas barras nos proporcionan una forma sencilla de agregar elementos de navegación a un sitio web, lo que simplifica el acceso a la información y hace que el usuario conozca mejor lo que el sitio ofrece.

En un sitio web diseñado para móviles, pueden resultar especialmente útiles si lo que se busca es diseñar un elemento de control, al cual los usuarios puedan llamar cada vez que necesiten navegar a través de la aplicación.

En este artículo, intentamos de dar una visión general de como utilizar estas barras, en sus distintas modalidades, con jQuery Mobile. Hablaremos de cómo crear encabezados y pies de página, así como la manera de convertirlos en barras de herramientas que sean útiles para móviles.

Añadir encabezados

Desde que realizamos nuestra Primera página con jQuery mobile, hicimos uso de la sección header para resaltar una parte del texto sobre el resto del contenido, por esto mismo es muy probable que el código que utilicemos en esta parte, te resulte bastante familiar.

En  esta  ocasión,  no  sólo  nos  enfocaremos  a  asignar  un  atributo  de  data  para  definir  la  sección, pretendemos profundizar más y demostrar cómo añadir funcionalidad extra a tu barra de encabezado.

Retomando un poco lo que ya se ha visto en este manual, debemos recordar que para definir un encabezado basta con utilizar un elemento de tipo div, el cual debe ser definido con el rol apropiado mediante el uso del atributo “data-role”.

<div data-role=”header”>Mi encabezado</div>

Esto bastará para que el navegador muestre la cadena de texto indicada, dentro de un recuadro de color negro, haciéndola resaltar del resto del texto.

Sin embargo, esto no debe parar ahí, podemos hacer un mejor encabezado añadiendo unas cuantas etiquetas HTML las cuales permitan resaltar aún más su contenido.

Algo básico para comenzar, puede ser utilizar una etiqueta “h1” para definir el encabezado, si la añadimos a la cadena, jQuery Mobile alargará el texto y automáticamente lo centrará en base a la pantalla.

<div data-role=”header”><h1>Mi encabezado</h1></div>

A nuestro encabezado, podemos añadirle algún tipo de funcionalidad extra mediante el uso de botones. Los botones, son elementos que pueden ser utilizados para promover la navegación (como es el caso del botón para regresar) o para enlazar con las secciones y páginas de contenido de nuestra aplicación.

Como el texto ya ocupa gran parte del centro de nuestro encabezado, nos restan solamente dos partes para colocar los botones, y estos espacios se encuentran en el extremos izquierdo y derecho de nuestro encabezado. Considerando la falta de espacio, debemos tener bien en claro cuáles serán los enlaces a los que queremos direccionar desde la página.

En base a esto, podemos estructurar nuestro encabezado con dos enlaces, uno en cada extremo. El primero de estos redirigirá a la página principal y el otro a la sección de contacto, para ello bastará un código como el siguiente:

<div data-role=”header”>

<a href=”principal.html”>Principal</a>

<h1>Mi encabezado</h1>

<a href=”contacto.html”>Contacto</a>

</div>

Quizás te preguntes, ¿Y dónde están los botones?, ya que claramente sólo estamos utilizando elementos de tipo anclaje en el código.

Los botones es algo automáticamente añadido porjQuery Mobile, si tu visualizas en un navegador el código que acabamos de estructurar, podrás notar que los enlaces se convirtieron en dos botones los cuales aparecen en cada extremo del encabezado.

En caso de que se desee utilizar un solo botón, puede omitirse uno de los enlaces, y con eso bastará; pero si se desea colocar el botón en solitario al lado derecho del encabezado, se tiene que recurrir a la clase de estilo “ui-btn-right”, la cual alineará el botón a la derecha.

De igual manera, en caso de ser necesario, se puede hacer uso de la clase “ui-btn-left” para colocar el botón a la izquierda, pero por defecto el elemento toma esa alineación.

Uso de iconos

Una alternativa que hace resaltar el diseño de nuestro encabezado, es el uso de iconos dentro de los botones que lo componen.

Estos elementos visuales harán más atractivo el diseño y añadirán usabilidad. La capacidad de agregar iconos a los elementos, es una propiedad que ha sido incluida como parte del framework de jQuery Mobile, por lo que puede ser utilizada en cualquier parte del diseño.

En esta ocasión haremos un pequeño uso de esta funcionalidad y más adelante en el manual explicaremos a más detalle su comportamiento.

Por defecto, al cargar jQuery Mobile en nuestro proyecto, tenemos acceso a una librería de iconos, los cuales podemos utilizar sin ningún problema. En el siguiente código, desplegamos la manera en que estos iconos pueden ser utilizados:

<div data-role=”header”>

<a href=”principal.html” data-icon=”home”>Principal</a>

<h1>Mi encabezado</h1>

<a href=”contacto.html” data-icon=”info”>Contacto</a>

</div>

Como se puede apreciar es bastante sencillo, una vez más hacemos uso de atributos de data, en este caso “data-icon” definirá cual es la imagen que se cargará enseguida del texto.

Para este ejemplo utilizamos dos valores, el primero de ellos es “home”, el cual despliega la imagen de una pequeña casa indicando que ese botón lleva a la página de inicio o principal, mientras que el valor “info” es utilizado para desplegar un icono con una i, símbolo comúnmente utilizado por los centros de información.

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros