You are here
Uso de múltiples páginas con Jquery Mobile Sin categoría 

Uso de múltiples páginas con Jquery Mobile

Uso de múltiples páginas con Jquery Mobile

 

Anteriormente estuvimos trabajando con un archivo sencillo al cual le agregamos jQuery Mobile para desplegar adecuadamente su contenido; tomaremos dicho código como base para continuar nuestra explicación. La primera modificación que haremos, será añadir una nueva página al archivo y establecer un enlace que redirige a ella.

Para iniciar esta práctica, tendremos que volver a hacer énfasis en la importancia del uso de atributos de data; como puedes recordar, jQuery Mobile siempre busca entre el código al elemento que lleve entre sus atributos el rol de “página” (data-role=”page”), esto es para saber que contenido debe ser desplegado en el marco principal.

Gracias a la sencillez de la librería, si quisiéramos agregar más páginas en un mismo archivo bastaría con añadir más capas con el mismo atributo y formato, como se muestra en el siguiente código:

<div data-role=”page” id=”inicio”>

<div data-role=”header”>Hola!</div>

<div data-role=”content”>

<p>

Bienvenido a la primera página de la Uneweb. Este es un sitio de prueba y en esta sección debería ir más contenido,

por el momento no tenemos más que decir, así que te dejamos nuestra

sección

<a href=”#acerca_de”>”Acerca de”</a>.

</p>

</div>

<div data-role=”footer”>

<i>2015 &copy; Uneweb</i>

</div>

</div>

<div data-role=”page” id=”acerca_de”>

<div data-role=”header”>Acerca de</div>

<div data-role=”content”>

<p>

<a href=”#inicio”>LaUneweb.es</a>, sitio dedicado al diseño y desarrollo de páginas web.

En estas páginas encontrarás cantidad de información para aprender a hacer tus páginas web, además de amplios servicios de diseño web profesional para empresas y particulares. Diseños web adaptados a cada cliente, optimizados para el SEO, autogestionables y con las técnicas CSS y XHTML más actuales.

</p>

</div>

<div data-role=”footer”>

<i>2015 &copy; Uneweb</i>

</div>

</div>

Como se puede apreciar tomamos el mismo código del artículo anterior y añadimos exactamente las mismas secciones para crear una nueva página, la diferencia radica en el contenido y en el ID de cada capa con el rol “page”.

De igual manera añadimos al texto un par de links internos, los cuales redirigen hacia cada una de las páginas, esto lo hacemos con la finalidad de establecer un vínculo de navegación y se logra añadiendo la etiqueta “a” con el identificador como valor del atributo “href”, el lugar donde comúnmente se coloca la dirección URL.

Al momento de que el usuario de clic sobre esos enlaces, el navegador se desplazará hacia la parte donde se encuentra la sección.

En una página tradicional, esto luciría como dos simples bloques de texto unidos en una misma página; sin embargo, jQuery Mobile se encarga de desplegar este código de manera distinta, mostrando únicamente un div a la vez.

Cuando se despliega esta página en un dispositivo móvil, únicamente se puede observar el primer div que se encuentra con el rol de página.

Si quisiéramos ver el contenido del resto de los bloques, tendríamos que dar clic en un enlace que lleve a ellos, sólo entonces podremos visualizarlos como una nueva página y si decidiéramos utilizar el botón de “regresar” del navegador, nos llevaría al bloque que observamos anteriormente.

Al momento de cambiar de página, podrás notar que existe una pequeña transición, si no es de tu agrado, puedes configurarla pero esto será un tema que veremos más adelante.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts