Navegación entre páginas con Jquery Mobile

En este post trataré otro aspecto importante a la hora de crear una aplicación móvil, como es la navegación entre páginas, esto evitará acumular demasiada información en un sola página y de paso facilitar la experiencia del usuario.

Para ello usaremos anclas y el atributo data-transition, data-transition en realidad consiste en unas clases CSS predefinidas que hacen más vistosa la navegación entre páginas.

Posibles valores para data-transition -> slide | slideup | slidedown | pop | fade | flip

Para crear las anclas de página simplemente asignamos un id a cada página, que será el alias del ancla.

La página principal #page1...

 <div data-role="page" id="page1">
<div data-role="header">
        <h1>Navegación con Jquery Mobile</h1>
    </div>   
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<a href="#page2" data-role="button" data-icon="star" data-iconpos="left" data-theme="a" data-mini="true" data-transition="slide">Pag. 2</a>
<a href="#page3" data-role="button" data-icon="star" data-iconpos="left" data-theme="b" data-mini="true" data-transition="pop">Pag. 3</a>
<a href="#page4" data-role="button" data-icon="star" data-iconpos="left" data-theme="c" data-mini="true" data-transition="fade">Pag. 4</a>
</div>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>

Como se puede ver he remarcado el id de la página principal, y si vemos en el contenido principal de esta página hay tres botones que tienen el ancla de las páginas con id #page2, #page3 y #page4

Ahora veremos el resto de páginas #page2, #page3, #page4 ...

<div data-role="page" id="page2">
<div data-role="header"><h1>Pag. 2</h1></div>
<div data-role="content">
<a href="#page1" id="ancla" data-role="button" data-icon="home" data-iconpos="notext" data-transition="pop"></a>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>

<div data-role="page" id="page3">
<div data-role="header"><h1>Pag. 3</h1></div>
<div data-role="content">
<a href="#page1" id="ancla" data-role="button" data-icon="home" data-iconpos="notext"  data-transition="slideup"></a>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>

<div data-role="page" id="page4">
<div data-role="header"><h1>Pag. 4</h1></div>
<div data-role="content">
<a href="#page1" id="ancla" data-role="button" data-icon="home" data-iconpos="notext" data-transition="slidedown"></a>
</div>
<div data-role="footer"><h1>PIE DE PÁGINA</h1></div>
</div>