jQuery Mobile (III) - Estructura & Navegación

julio 26, 2012


Si te has perdido alguno de los capítulos anteriores, a continuación tienes los enlaces como el titular de todos los que vamos a ir viendo:


Llevo dándole bastante caña a jQuery Mobile en las últimas semanas aunque no me hayáis visto 'postear' mucho sobre ello. En estas semanas he aprendido como funciona la estructura  interna de jQuery Mobile:


- Roles: jQuery Mobile para definir lo que queremos hacer en los <div> usa el atributo data-role. Por ejemplo <div data-role="content"> para mostrar el contenido de la página. En esta página tenéis más roles con los que jugar:

http://jquerymobiledictionary.pl/dict.html


- Multipágina: todas las páginas se pueden incrustar dentro de un solo HTML. Esto que a priori puede parecer extraño, es altamente intuitivo una vez se realiza el primer ejemplo, y por ello os lo enseño.

· A continuación tenemos una página que corresponde a la primera página web que nos encontramos al ejecutar la aplicación. Esta página la llamaré Principal:


<-- PÁGINA PRINCIPAL -->
<!DOCTYPE html>
<html>
     <head>
          <title>Principal</title>
               <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
               <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
                <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
     </head>
<body>
     <div data-role="page" id="principal">
      <div data-role="header">
            <h1>Cabecera</h1>
      </div>
      <div data-role="content">
            <p>Aquí irá nuestro contenido</p>
     </div>
           <div data-role="footer">
                 <h4>Pie de página</h4>
           </div>
     </div>
</body>
</html>

· Si ahora quisiéramos incluir una nueva página, si has programado algo en web dirías : "Ya sé, añado un link que referencia a otra página tipo <a href="otra.html">ir a otra </a>". Pues casi, porque también podemos hacer eso, pero la principal ventaja de jQuery Mobile es que puedes incrustar la página dentro del mismo html. Mirad:


<-- PÁGINA PRINCIPAL -->
<!DOCTYPE html>
<html>
     <head>
          <title>Principal</title>
               <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
               <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
                <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
     </head>
<body>
     <div data-role="page" id="principal">
      <div data-role="header">
            <h1>Cabecera de la página principal</h1>
      </div>
      <div data-role="content">
            <p>
               <a href="#secundaria" data-role="button">Ir a la página secundaria </a>
            </p>
     </div>
           <div data-role="footer">
                 <h4>Pie de página</h4>
           </div>
     </div>

     <div data-role="page" id="secundaria">
      <div data-role="header">
            <h1>Cabecera de la página secundaria</h1>
      </div>
      <div data-role="content">
            <p>Estamos en la página secundaria =)</p>
     </div>
           <div data-role="footer">
                 <h4>Pie de página</h4>
           </div>
     </div>
</body>
</html>

· Llamadas internas: funciona de manera simple, metemos otra página (data-role="page") en el documento html. Esta se identificará como "secundaria" y tendrá la misma estructura que la anterior. Para llamarla basta con poner en el link de la página principal la referencia: "#secundaria" y nos llevará a esa parte del código, donde jQuery Mobile se encargará de mostrarla como una página. A esto se le denomina multi-página.

Bien, ya sabemos que con la # llamamos a páginas internas, pero ¿Y si quiero llamar a otras que tenga en mi directorio local?:

· Llamadas externas: si queremos llamar a otro documento html que esté compuesto por una o varias páginas de jQuery Mobile, tenemos que llamarla sin la # y poniendo su Path completo en caso de estar alojado en un servidor, o poniendo solo el nombre del archivo HTML en caso de que esté en nuestro local (en el mismo directorio desde donde hagamos la llamada).

· Llamadas externas completas: además tenemos la opción de forzar a jQuery Mobile a que abra otra ventana distinta y llame a otra página externa, introduciendo el elemento "rel". En caso de querer ir a otra página externa a nuestra aplicación y que abra otra ventana:

<a href="#secundaria" data-role="button" rel="external">Ir a la página secundaria externa en otra ventana</a>

· Otra manera de realizar llamadas externas completas es con data-ajax=false. Ejemplo:

<a href="#secundaria" data-role="button" data-ajax=false>Ir a la página secundaria externa en otra ventana de otra manera</a>

Para volver atrás basta con poner data-add-back-btn="true" data-back-btn-text="Atrás", dentro de la línea que controla en que página nos encontramos. De la siguiente manera:

<div data-role="page" id="secundaria" data-add-back-btn="true" data-back-btn-text="Atrás">

· Por último, mucho ojo si usáis llamadas a páginas externas y usáis PhoneGap. Deberéis asegurar que vuestra versión de android, iOS,bb…es compatible y que además tenéis vuestros hosting en la whitelist de PhoneGap.

· Como otras veces, a continuación os pongo algunos libros recomendados y de los cuales busco inspiración para los artículos:

jQuery Mobile - Up and Running de Maximiliano Firtman

jQuery Mobile - First Look de Giulio Bai

Master Mobile Web Apps with jQuery Mobile de Matt Doyle

Otra más, poco a poco vamos viendo como hacer cosillas, en la siguiente hablaré de los teléfonos y jQuery Mobile, ¡hasta entonces!.

Share This Story

Tags:

Working with Data since 2012.

You Might Also Like

5 comentarios

  1. unbudah19 de enero de 2013, 22:35

    lo que me jod de jquery mobile es tener que repetir todas las cabezeras, no es logico.

    ResponderEliminar
  2. Javi19 de enero de 2013, 23:27

    Pues si...y si lo usas con PhoneGap también debes incluir todas las cabeceras en cada HTML, sino no te detecta el API cordova...y acabas repitiendo código. Aunque no tiene mucha carga.

    Antes de terminar enero publicaré el próximo capítulo de esta serie: jQuery Mobile (VI) - Trabajando con formularios

    Estará muy interesante.

    Muchas gracias por participar :)

    ResponderEliminar
  3. Unknown11 de febrero de 2013, 14:34

    Te felicito muy buen tutorial , gracias ti pude realizar varias cosas que no tenia muy claro como hacerlas.

    ResponderEliminar
  4. Unknown25 de octubre de 2015, 17:18

    Hola.
    muy buen tutorial.
    Queria una ayuda por favor.
    Mi caso es :
    tengo una pagina (principal.aspx) mulipage compuesta de dos page:
    - Lista
    - Ficha
    Otra pagina (mensaje.aspx) compuesta de dos page:
    - Lista
    - Ficha

    Desde la page Ficha de principal.aspx llamo a la pagina mensaje.aspx.
    Pero cuando cierro el mensaje.aspx, se me queda en principal.aspx pero en la page lista y no en la page ficha que fué la que la abrió.

    Puedes ayudarme por favor.

    ResponderEliminar
  5. Kamikaze29 de septiembre de 2016, 21:14

    Hola Buenas tardes... cómo hago restricción a una página en específico de esas que tienen data-role='page'? me estoy partiendo el coco con eso y estoy que aborto el proyecto

    ResponderEliminar

Sé respetuoso/a, en este blog caben todo tipo de opiniones con respeto y serenidad.

Contact Form :: (」゜ロ゜)」