Una de las cosas que particularmente más me han gustado de jQuery Mobile son las barras de navegación, por ser extremadamente prácticas. Sirven precisamente para lo que su nombre indica, navegar, pero lo hacen de una manera magistral. Poseen un aspecto muy vistoso, además de ciertas propiedades que podremos ajustar con el fin de hacerlas más potentes.

Para explicar las barras de navegación vamos a realizar algo parecido al ejemplo desarrollado en el artículo donde hablamos sobre las listas, donde teníamos cuatro páginas dentro del mismo documento HTML. La primera es una página inicial y las otras tres sirven para mostrar la información adicional a la pagina.

En este caso vamos a hacer el ejemplo de una página que hable sobre jQuery, otra página que hable de jQuery UI y una última sobre jQuery Mobile. La página inicial tendrá solo una introducción y la barra de navegación para ir a las otras. Además, para completar el artículo, veremos también algunas cosas interesantes de la configuración de jQuery al respecto de las transiciones.

Agregando las barras de navegación

Las barras de navegación son algo parecidas a las pestañas, por eso lo ideal es ponerlas en el encabezado (elemento con data-role="header"), o en el pie de la página (elemento con data-role="footer"). Esto no es estrictamente necesario, pero hace que nuestra aplicación esté mejor organizada. En el caso del ejemplo de este artículo, pondremos la barra de navegación en el pie de la página, algo que se logra con el siguiente código:

<div data-role="navbar">
   <ul>
      <li><a href="#jq" >jQuery</a></li>
      <li><a href="#jqui" >jQuery UI</a></li>
      <li><a href="#jqm">jQuery Mobile</a></li>
   </ul>
</div>

Como debemos saber, si hemos seguido la marcha del Manual de jQuery Mobile, a todo lo que tiene que ver con los widgets del framework, debemos agregarle el atributo data-role. En este caso recibe el valor de "navbar". Además, como se aprecia en el código anterior, tenemos que crear una estructura en HTML, con un un elemento DIV, dentro del cual debe estar contenida una lista (Elemento UL). Pero atención porque esta lista no organizará sus elementos uno debajo del otro, sino uno a continuación del otro, es decir, crea una barra horizontal.

En este momento, tal vez algunos lectores se preocupen por el espacio, en caso de que, al expandirse de forma horizontal, no quepan todos los elementos en las a menudo estrechas pantallas de los dispositivos. El problema lo resuelve jQuery Mobile de forma muy eficiente, ya que cada uno de los elementos tiene el mismo ancho, es decir que si tenemos dos elementos, cada uno tendrá, la mitad del ancho de la barra, y si son tres entonces cada uno será de un ancho igual a un tercio de la barra. Aun hay más, pues si la pantalla es muy pequeña, o son muchos elementos, entonces mostraría la barra en varias líneas, pasando de una fila de elementos a una rejilla o tabla.

Agregando temas

A lo largo del Manual de jQuery Mobile, hemos visto que para agregar temas a cualquiera de los widgets, presentes en el framework, solo debemos colocar el atributo data-theme. Sin embargo, en las barras de navegación no funciona así. Es decir, si en nuestro elemento DIV hacemos esto, no se provocará ningún cambio. En cambio, si queremos que todos los elementos de la barra de navegación se vean diferentes al que jQuery Mobile le asigna por defecto, debemos agregar el data-theme en el elemento que contiene a nuestra barra, que en este caso es el pie de la página.

Si hacemos lo que se explicaba anteriormente terminaríamos por construir un pie de página como el siguiente.

<div data-role="footer" data-position="fixed" data-theme="b">
   <div data-role="navbar">
      <ul>
         <li><a href="#jq" data-icon="star">jQuery</a></li>
         <li><a href="#jqui" data-icon="plus"> jQuery UI </a></li>
         <li><a href="#jqm" data-icon="grid"> jQuery Mobile </a></li>
      </ul>
   </div> <!-- /navbar -->
</div> <!-- /footer -->

Como puedes ver además de agregar el tema "b" al pie de la página, con el que obtenemos el color azul, también le puse un icono a cada uno de los elementos que componen la barra de navegación. Si no sabes cómo trabajar con iconos, revisa el artículo anterior del manual de jQuery Mobile donde nos dedicamos a explicar el tema de los iconos y sus configuraciones.

Pero cabe resaltar que a cada uno de los elementos, puedes asignarle un tema diferente. Tal vez quieras que alguno resalte, como por ejemplo el que tiene el texto jQuery Mobile, algo que conseguimos con un código como el siguiente.

<li><a href="# jqm" data-icon="grid" data-theme="e" data-transition="flip"> jQuery Mobile </a></li>

Ahora hemos agregado un data-theme a un solo elemento, pero quizás les llame la atención, el atributo data-transition. Con esa configuración logramos que al pasar de una página a otra se modifique la transición normal que hace jQuery Mobile.

Transiciones entre páginas con jQuery Mobile

jQuery Mobile cuando se pasa de una página a otra, tanto si son archivos diferentes como si son páginas en el mismo documento HTML con la estructura multipágina, se produce una transición automática. Este asunto ya se había comentado anteriormente en otros artículos de DesarrolloWeb.com, pero para los que no lo sepan todavía, se trata de un efecto especial bastante atractivo, que mediante una animación suavizada, nos intercambia la página que estamos visualizando. La transición por defecto se puede cambiar por medio de atributos HTML de una manera muy sencilla.

El atributo data-transition, con el cual modificamos las transiciones entre las paginas, o cuadros de diálogo, puede recibir los siguientes valores:

• Slide: la que se asigna por defecto. data-transition="slide"
• Slide Up: La página se perderá por la parte superior. data-transition="slideup"
• Slide Down: La página se perderá por la parte inferior. data-transition="slidedown"
• Pop: La página aparece de improvisto. data-transition="pop"
• Fade: Hace un efecto de fundido. data-transition="pop"
• Flip: La página hace un bonito efecto 3D. transition="flip"

Ejemplo de navegación en una página web

Para mayor comprensión dejaremos el código del ejemplo mencionado en este artículo. Por ahorrar un poco de espacio solo he colocado el código de las dos primeras páginas. Tendremos una barra de navegación en la página inicial. Debo mencionar que la página no cumple grandes tareas funcionales, pero ilustra el uso de las barras de navegación, además de las transiciones de páginas. <!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   <title> Barras de Navegacion</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" id="inicio">
      <div data-role="header" data-position="fixed">
         <h1>jQuery</h1>
      </div><!-- /haeder -->
      <div data-role="content">
         <p>Navega a través de esta aplicación de DesarrolloWeb.com para conocer algo sobre jQuery</p>
      </div><!-- /content -->

      <div data-role="footer" data-position="fixed" data-theme="b">
         <div data-role="navbar">
            <ul>
               <li><a href="#jq" data-icon="star" data-transition="pop">jQuery</a></li>
               <li><a href="#jqui" data-icon="plus" data-transition="slideup"> jQuery UI </a></li>
               <li><a href="#jqm" data-icon="grid" data-theme="e" data-transition="flip"> jQuery Mobile </a></li>
            </ul>
         </div><!-- /navbar -->
      </div><!-- /footer -->
   </div><!-- /page -->

   <div data-role="page" id="jqm">
      <div data-role="header" data-position="fixed">
         <h1>jQuery Mobile</h1><a href="#inicio" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Inicio</a>
      </div><!-- /haeder -->
      <div data-role="content">
         <p>Lectura inicial de la web oficial de jQuery Mobile:</br> <span class="ui-btn-active"> jQuery Mobile: framework para móviles.</span>
         </p>
         <img style="width:30%;" src="http://upload.wikimedia.org/wikipedia/commons/5/53/Jquery-mobile-logo.png"/>
      </div><!-- /content -->

      <div data-role="footer" data-position="fixed" data-theme="b">
         <h3>jQuery Mobile</h3>
      </div><!-- /footer -->
   </div><!-- /page -->
</body>
</html>

Con todo esto hemos aprendido dos tópicos de jQuery Mobile. Por un lado las mencionadas barras de navegación, pero también hemos dado un primer repaso a las transiciones entre páginas.

Nos vemos en una próxima, recuerda dejar tus comentarios y apuntes. De tarea te queda hacer las dos páginas restantes, o bien puedes verlas ya realizadas en el ejemplo completo en una página aparte.