Navegacion jquery mobile - CGastrell/phonegap GitHub Wiki

En el body de un HTML jQuery Mobile permite tener varias paginas. Esto responde basicamente a la necesidad de minimizar el impacto de la descarga de recursos.

A su vez, la navegacion es efectuada a traves de llamadas internas, logrando un efecto de inmediatez en las transiciones.

En el ultimo ejercicio incorporamos jQuery Mobile a una aplicacion de Phonegap. Para agregar mas paginas solo debemos insertar mas elementos (div) con el atributo data-role="page":

  <!-- Pagina home -->
  <div data-role="page" id="home">
    <div data-role="header">
      <h1>Encabezado</h1>
    </div>
    <div data-role="content">
      Contenido
    </div>
    <div data-role="footer">
      Pie
    </div>
  </div>

  <!-- Pagina otra -->
  <div data-role="page" id="otra">
    <div data-role="header">
      <h1>Otro encabezado</h1>
    </div>
    <div data-role="content">
      Mas contenido
    </div>
    <div data-role="footer">
      Otro Pie
    </div>
  </div>

Si bien esto significa un mejor rendimiento, la navegacion entre paginas tambien es particular. Dado el ejemplo anterior, para navegar las paginas debemos agregar vinculos del estilo:

<a href="#otra">Otra pagina</a>
<a href="#home">Pagina principal</a>

Continuando con el ejemplo anterior:

  <div data-role="page" id="home">
    <div data-role="header">
      <h1>Encabezado</h1>
    </div>
    <div data-role="content">
      <h3>This is the homescreen of the App</h3>
      <img src="icon.png">
      <br />
      <a href="#otra">Pagina siguiente</a>
    </div>
    <div data-role="footer">
      Pie
    </div>
  </div>

  <div data-role="page" id="otra">
    <div data-role="header">
      <h1>Otro encabezado</h1>
    </div>
    <div data-role="content">
      Mas contenido
      <br />
      <a href="#home">Volver a la pagina inicial</a>
    </div>
    <div data-role="footer">
      Otro Pie
    </div>
  </div>

Agregar estos ejemplos al codigo del ejercicio anterior.

En dispositivos mobiles el espacio es reducido. La tendencia ha sido incluir navegacion por tabs: vinculos en forma de botones al pie de las paginas.

Para lograr una vista asi, incluiremos el siguiente codigo en el <div data-role="footer" data-position="fixed"> de ambas paginas. El vinculo correspondiente a la pagina debe llevar las clases que se ven en este ejemplo (este es el footer de home):

  <div data-role="navbar" data-iconpos="bottom">
    <ul>
      <li><a href="#home" data-iconpos="top" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
      <li><a href="#test" data-iconpos="top" data-icon="star" class="">Test</a></li>
    </ul>
  </div>

Este codigo en el footer agrega un widget data-role="navbar" de navegacion. Los widgets son componentes que jQuery Mobile inicializa en base a sus atributos.

Una vez aplicados estos cambios, correr la aplicacion en el dispositivo y verificar su funcionamiento.

Hay opciones que pueden configurarse en jQuery Mobile para mejorar la navegacion y funcionalidad en los dispositivos.

    $.mobile.allowCrossDomainPages = true;
    $.support.cors = true;
    $.mobile.buttonMarkup.hoverDelay = 0;
    $.mobile.pushStateEnabled = false;
    $.mobile.defaultPageTransition = "none";

Ref: jQuery Mobile