Vamos a empezar a meternos en materia con Phonegap, así que hoy haremos un menú de navegación entre pantallas de la forma más fácil: haciendo páginas Web.

1.- Primeramente creamos un proyecto, ya hemos visto aquí como hacerlo.

2.- Una vez creado, renombraremos el archivo “index.html” ubicado en “assets -> www” para poder crear nosotros un archivo con dicho nombre sin tener que borrar el que ya viene de ejemplo. En mi caso le he puesto de nombre “index.old.html”.

3.- Creamos el nuevo archivo “index.html” y otros 2 a los que he llamado “pantalla2.html” y “pantalla3.html”.

Archivos de pantallas

Archivos de pantallas

4.- Y para terminar simplemente creamos en cada pantalla una botonera que servirá de menú para acceder al resto de pantallas. Este sería el código para cada pantalla:

<html>
	<head>
	<title>Demo Pantallas</title>
	<!-- Incluimos los archivos de estilos y liberías jQuery -->
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
	<script src="jquery.mobile/jquery-1.7.2.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	</head>
	<body>
		<!-- Creamos una capa para la navegación -->
		<div data-role="navbar">
    		<ul>
    		<!-- Enlaces a las pantallas. Por defecto indicamos que la pantalla actual se muestre marcada -->
		        <li><a href="#" class="ui-btn-active">Pantalla Principal</a></li> 
		        <li><a href="pantalla2.html" rel="external">Pantalla 2</a></li>
		        <li><a href="pantalla3.html" rel="external">Pantalla 3</a></li>
		    </ul>
		</div>
		Pantalla Principal
	</body>
</html>

One Thought on “Phonegap: navegando entre pantallas en una app Web

  1. Gracias! Recientemente he estado buscando informacion sobre este tema y de momento, tu pagina ha
    sido lo mejor que he encontrado, muchas gracias =)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies