Tutorial de jQuery Mobile II. Transición de páginas

Ya hemos visto en Web App con jQuery Mobile. Tutorial I, cómo maquetar una página en HTML, y cómo hacer los enlaces para pasar de una página a otra, pues bien, ahora vamos a ver unos «efectos especiales» para hacer la Web Appmás atractiva.

jQuery Mobile incluye un conjunto de seis efectos de transición entre páginas, basados en CSS y que pueden aplicarse a cualquier vínculo de la página o formulario. Estos efectos los podréis ver en vuestro ordenador si navegáis con Chrome, espero y deseo que en un futuro cercano, podamos utilizar estos efectos también en diseño web tradicional.

También hay que resaltar, que alguna de las transiciones no se ve correctamente con algunas versiones antiguas de Android. En cualquier caso, es obvio que tanto los navegadores de Smartphone como los tradicionales, tendrán que acabar «tragándose» esta tecnología tarde o temprano.

Los seis efectos de los que os hablo, son los siguientes:

1. Slid – La página actual se desplaza hacia la izquierda a la vez que entra desde la derecha la página nueva.
2. Pop – La página nueva se abre sobra la antigua en forma de pop-up pero ocupando todo el espacio.
3. Slidup – La página nueva aparece desde abajo, desplazándose hasta ocupar toda la pantalla.
4. Slidedown – La página nueva aparece desde arriba y se desplaza hacia abajo ocupando la pantalla.
5. Fade – La pantalla nueva se monta sobre la actual con una transición de cambio de opacidad.
6. Flip – El más espectacular. Esta transición entre pantallas simula un giro de 180º de la página, simulando que la nueva es el dorso de la que teníamos.

La forma de hacer los enlaces es igual de sencilla que en el capítulo anterior, basta con añadir la etiqueta data-transition y asignarle el tipo de transición que deseamos conseguir.

<a href=»#page2″ data-transition=»pop»>page 2</a>

Para volver atrás desde la página destino, lo que hacemos es realizar el mismo efecto que nos ha traído pero en sentido contrario, y esto lo conseguimos con la etiqueta data-direction=»reverse»

En el siguiente código CSS podemos ver cómo se establecen los datos para definir los distintos estilos. Como vemos se define tanto el «in» como el «out».

.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); }
}

Si existe la posibilidad de definir la dirección inversa del movimiento, lo haremos en la CSS como «out».

Tenemos la posibilidad también de definir el tiempo de la transición, aquí vemos cómo:

.in, .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 350ms; }

En el ejemplo que os dejo para ver y descargar, podréis ver que además de los atributos explicados en el tutorial I y en este, aparecen otros como el data-role=»button», en el que lo que conseguimos es dar a un hipervínculo, aspecto de botón.

Como respaso, os indico a continuación todos los que aparecen y su misión.

• data-role:  define el comportamiento de una etiqueta.

• data-role=»page» id=»pagina1″ : definimos el div que contiene a la página1 y le asignamos un id
• data-role=»header» : definimos el div que va a contener la cabecera de la página
• data-role=»content» : definimos el div en el que va a estar el contenido de la página
• data-role=»footer» : definimos el div que contiene el pie de página
• data-role=»button» : definimos el aspecto que va a tener el enlace, en este caso tipo button

• data-transition: podemos utilizar esta etiqueta con los 6 tipos distintos de transición.

• data-transition=»slide»
• data-transition=»slideup»
• data-transition=»slidedown»
• data-transition=»pop»
• data-transition=»fade»
• data-transition=»flip»

• data-theme: cambia el color. En la página2, vemos cómo cambia el color de fondo en el data-role=»content» y el el botón data-role=»button».

Si necesitáis más documentación para profundizar sobre jQuery Mobile, tenéis toda la información en http://jquerymobile.com/

• Más información relacionada con jQuery Mobile