Estructura multipágina de jQuery Mobile

  • Por
  • 13 de diciembre de 2011
  • Valoración:
  • 7 Comentarios
  • Frameworks Javascript
Cómo hacer una página multipágina, de modo que se puedan reunir varias páginas en un archivo HTML, en jQuery Mobile Framework.
Continuamos dando nuestros primeros pasos para el desarrollo de páginas orientadas a dispositivos móviles con jQuery Mobile. En esta ocasión nos vamos a dedicar a la estructura de las páginas "multipágina", lo que nos dará ocasión de ver ya algún efectillo interesante en nuestro navegador.

En el anterior artículo del Manual de jQuery Mobile explicamos cuál es la estructura de la página básica y ahora veremos que la multipágina no es más que la unión de varias páginas básicas en un mismo archivo HTML.

Quizás alguna persona con conocimientos avanzados de jQuery pueda estar decepcionada, al ver como en este manual de jQuery Mobile no hemos utilizado todavía ningún código Javascript. Si es así lo siento, pero ya advierto que esta situación va a mantenerse al menos durante bastantes artículos más. Pues, si bien es cierto que en esta ocasión vamos a poder ver en marcha efectos dinámicos, no es necesario utilizar Javascript para nada, porque muchos de los comportamientos básicos de este framework se configuran directamente sobre el código HTML, por medio de diversos atributos con el prefijo "data-".

Para hacer la página básica ya vimos que las divisiones tenían un atributo "data-role" para indicar la estructura de la página, con su cabecera, cuerpo y pie. Ahora veremos otros atributos parecidos para indicar otras cosas sobre las páginas que estamos desarrollando.

Multipágina es la unión de varias páginas básicas

En el mismo código HTML podemos incluir varios bloques de página básica y tendremos un archivo HTML con diversas páginas que se conoce como Multipágina. Pero tranquilos, esto no quiere decir que en jQuery Mobile tengamos que desarrollar siempre todas las páginas del sitio web en el mismo archivo HTML, podemos organizarlas si lo deseamos en archivos aparte, o hacer una mezcla entre páginas multipágina y páginas básicas en diferentes archivos HTML.

La página básica vimos que incluía una serie de scripts Javascript y estilos CSS del framework, además de una declaración META para definir la escala o zoom con la que se debería presentar. Todo eso permanece igual, lo único que cambiará será el cuerpo de la página, donde colocaremos varios bloques data-role="page".

Veamos una unión de varios bloques de páginas básicas.

<!-- PORTADA -->
<div data-role="page" id="portada">
   <div data-role="header">
      <h1>Titular de página portada</h1>
   </div>
   <div data-role="content">   
      <p>Fabrico guitarras de todos los colores</p>      
      <p>Puedes ver <a href="#galeria">mis guitarras</a></p>   
      <p>Puedes <a href="#comprar" data-rel="dialog">comprar una guitarra</a></p>
   </div>
   <div data-role="footer">
      Pie de página
   </div>
</div>
<!-- /PORTADA -->

<!-- GALERIA -->
<div data-role="page" id="galeria" data-title="Galería de guitarras">
   <div data-role="header">
      <h1>Galería de fotos de mis guitarras</h1>
   </div>
   <div data-role="content">   
      <p>Puedes ver todas mis guitarras</p>      
      <p><a href="#portada">volver</a></p>   
   </div>
   <div data-role="footer">
      Pie de página
   </div>
</div>
<!-- /GALERIA -->

<!-- COMPRAR -->
<div data-role="page" id="comprar" data-title="Comprar guitarras">
   <div data-role="header">
      <h1>Comprar guitarras</h1>
   </div>
   <div data-role="content">   
      <p>Servicio temporalmente indisponible</p>      
      <p><a href="#portada">volver</a></p>   
   </div>
   <div data-role="footer">
      Pie de página
   </div>
</div>
<!-- /COMPRAR -->

Este sitio estaría formado por tres páginas distintas: "portada", "galeria" y "comprar". A pesar que están escritas en el mismo archivo HTML, jQuery se encargará de mostrarlas como si fueran páginas independientes. La navegación entre ellas está realizada por enlaces, como veremos a continuación.

Enlaces entre las páginas de la estructura multipágina

Cada una de las páginas básicas del esquema multipágina tienen un identificador, que se pone en el DIV principal de la página, el que tiene data-role="page". Veamos a continuación el código HTML de la división general de la página de portada.

<div data-role="page" id="portada">

Como vemos, se le ha colocado id="portada", con lo que ya tiene un nombre asignado. Ahora, si queremos hacer enlaces dirigidos hacia esta portada, los creamos simplemente como si fueran enlaces internos. Para ello colocamos el href="#portada", es decir, tal como se hace con los enlaces dentro de la misma página que conocemos del HTML.

<a href="#portada">Ir a la portada</a>

Lo genial de estos enlaces es que, para pasar de una página a otra, jQuery Mobile produce una transición automática, que hace que una página actual desaparezca y entre la enlazada con un efecto suavizado. Más adelante explicaremos cómo configurar las transiciones entre páginas.

Títulos de las páginas

Como todas las páginas de esta estructura multipágina están en el mismo archivo HTML, ocurre que todas comparten un mismo TITLE, que fue indicado en el HEAD de la página. Sin embargo los desarrolladores probablemente querrán que cada página tenga un título independiente. Para hacer posible ese caso de uso, jQuery Mobile dispone de un atributo data-title que se coloca en el DIV principal de cada una de las páginas.

En data-title podemos indicar el título que tiene cada página del esquema de multipágina y jQuery Mobile se encargará de actualizarlo automáticamente cuando se navegue a esa página. Podemos ver el título de la sub-página de galería:

<div data-role="page" id="galeria" data-title="Galería de guitarras">

Así vemos que, cuando el usuario pulse un enlace que le lleve a esta página, se cambiará de manera automática el titular de la ventana del navegador a lo indicado mediante data-title="Galería de guitarras".

En resumen. La primera de las páginas podrá tener el título que indiquemos en el TITLE del documento HTML, pero si queremos asignar otros títulos diferentes a otras páginas de la estructura multipágina, deberemos hacerlo a través de los atributos data-title.

Atributos data-X

Quiero hacer una mención aparte a estos atributos especiales de jQuery Mobile. Como has podido ver, al desarrollar para este framework se utilizan diversos atributos "data-X", como los mencionados data-role o data-title.

Nota: Otro ejemplo que hemos puesto en este artículo de la estructura multipágina es data-rel="dialog", que asignado a un enlace, provoca que la página que se está enlazando se muestre como si fuera un cuadro de diálogo. Más adelante veremos más cosas acerca de los cuadros de diálogo, pero para que se identifique ese data-rel="dialog" pongo aquí el código del enlace donde se ha colocado ese atributo.

<a href="#comprar" data-rel="dialog">comprar una guitarra</a>

Todos estos atributos con prefijo data- son perfectamente válidos en la sintaxis HTML5, ya que las especificaciones del lenguaje permiten cualquier número de atributos que comiencen por la cadena "data-". En HTML5 se utilizan para embeber datos de las aplicaciones web en las propias etiquetas del HTML y jQuery Mobile los utiliza, como has podido comprobar, para configurar el funcionamiento de las páginas desarrolladas con estas librerías.

Más adelante veremos otros usos de esta técnica para implementar diversos componentes de interfaces de usuario, configurar las transiciones entre páginas, el comportamiento de los enlaces, etc.

Conclusión

De momento dejamos por aquí estas explicaciones, ofreciendo el enlace al ejemplo en marcha donde puedes ver la estructura multipágina.

Como podrás comprobar al ver el ejemplo en marcha, se han realizado dos tipos de comportamientos dinámicos. Primero las transiciones entre páginas, con un efecto de desplamiento suavizado. Luego el cambio automático del TITLE del documento, al pasar de una página a otra. Es simplemente una pequeña muestra de las posibilidades del framework y de como, a partir de mero código HTML, se pueden configurar diversos dinamismos. Ni hace falta decir que, si no basásemos nuestras aplicaciones en jQuery Mobile, realizar estos comportamientos dinámicos exigiría usar bastante Javascript y lidiar con las particularidades de cada dispositivo y navegador.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Antonio

07/1/2012
No me hace transiciones
Buenas,

la página que poneis para ver los resultados no me genera ningun tipo de transición entre las secciones de la web, estoy usando Firefox 9.0.1

eugim

19/1/2012
Prueba con otro navegador
Te sugiero que pruebes con Chrome o con un navegador para móviles, pues el ejemplo sí que muestra las transiciones en esos navegadores.

Daikot

17/8/2012
Problema con el botón back, de multipagina a pagina externa
Estamos construyendo utilizando jquery mobile, la cuestión es aunque utilizamos hasta cierto punto la gran ventaja de las multipaginas, llega un punto que debemos redirigir con un 'href' a una pagina distinta por cuestiones de compatibilidad al tratarlo de hacer en multipagina...
Cuando paso de alguna de las paginas hechas en multipagina, a un link externo, tengo que utilizar rel="external" para dirigirme a una pagina externa, El Problema es que que cuando sigo en esa pagina externa y quiero devolverme a la pagina que estaba inicialmente el boton de back no aparece.

Fernandido

24/9/2012
Mantener la misma cabecera y pie de página
Buenas, estoy aprendiendo de vuestro excelente artículo y estoy comprobando lo fácil que es. Mil gracias por vuestra ayuda.

Me ha salido una duda. Si quiero mantener siempre la misma cabecera y pie de página del ejemplo en todas las páginas ¿Cómo podría hacerlo? ¿Se tendría que repetir para cada elemento data-role="page" o existe alguna manera para no repetir el código?
Mil gracias

alvarodoune

01/5/2013
JQM parametros
Hola, te consulto... en el ejemplo cuando haces click en "comprar una guitarra" y te abre un popup, como se puede hacer para pasarle el idGuitarra para saber que guitarra estoy comprando?

muchas gracias

Eduardo

27/6/2013
Pregunta
como puedo navegar entre las paginas multipagina de mi proyecto con un boton que tiene un evento.

ej.
al presionar mi boton este llama a un evento javascript en el que segun el resultado me manda a una pagina o a otra, pero no se como mandar a esa pagina desde ese codigo,espero tu sepas

saludos

:)

09/10/2013
Necesito ayuda...
Disculpa no se si me puedas ayudar, yo tengo que pasar le el contenido de una variable de la pagina principal a otra
si estoy usando eso hay alguna forma facil de hacerlo?

Compartir