jQuery Mobile :: Enlaces a páginas internas.

jQuery Mobile:: Navegación
Vamos a crear una pequeña aplicación con las siguientes características:
- La aplicación tendrá una primera página con el siguiente contenido:
 El título de la página debe ser: Aplicación jQuery Mobile
 El encabezado de la página debe ser: Inicio
 El pie de página debe ser: Información
 El contenido consistirá en tres enlaces a páginas internas con los
nombres: “Nombre”, “Apellidos” y “Ciudad”

Cuando pulsemos sobre “Nombre”, nos deberá aparecer una página con las si-
guientes características:
 El encabezado de la página debe ser: Nombre
 El contenido debe ser: Mi nombre es: [vuestro nombre]
 En el encabezado debe haber un botón de retroceso “Anterior” que al
pulsarlo nos dirija a la primera página.

Cuando pulsemos sobre “Apellidos”, nos deberá aparecer una página con las si-
 El encabezado de la página debe ser: Apellidos
 El contenido debe ser: Mis apellidos son: [vuestros apellidos]

Cuando pulsemos sobre “Ciudad”, nos deberá aparecer una página con las si-
 El encabezado de la página debe ser: Ciudad
 El contenido debe ser: Mi ciudad es: [vuestra ciudad]

tarea2.html
<!DOCTYPE html>
<html>
<head>
<title>Aplicación jQuery Mobile</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="paginamenu" data-title="Aplicación jQuery Mobile">
<div data-role="header">
<h1>Inicio</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#paginanombre">Nombre</a></li>
<li><a href="#paginaapellidos">Apellidos</a></li>
<li><a href="#paginaciudad">Ciudad</a></li>
</ul>
</div>
<div data-role="footer">
<h1>Información</h1>
</div>
</div>
<div data-role="page" id="paginanombre" data-title="Aplicación jQuery Mobile">
<a href="#paginamenu" data-icon="arrow-l">Anterior</a>
<h1>Nombre</h1>
</div>
<h5>Mi nombre es: Juan Bautista</h5>
</div>
</div>
</div>
<div data-role="page" id="paginaapellidos" data-title="Aplicación jQuery Mobile">
<h1>Apellidos</h1>
</div>
<h5>Mis apellidos son: Cascallar Lorenzo</h5>
</div>
</div>
</div>
<div data-role="page" id="paginaciudad" data-title="Aplicación jQuery Mobile">
<h1>Ciudad</h1>
</div>
<h5>Mi ciudad es: Madrid</h5>
</div>
</div>
</div>
</body>
</html>

Nota: Utilizamos <a href="#paginamenu" data-icon="arrow-l">Anterior</a> en la cabecera
de la página data-role="header" para crear un botón de retroceso a la página
principal.
data-icon="arrow-l dibuja en el botón una flecha hacia la izquierda.

jQuery Mobile :: Enlaces a páginas internas.

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to jQuery Mobile :: Enlaces a páginas internas.

Similar to jQuery Mobile :: Enlaces a páginas internas. (17)

More from jubacalo

More from jubacalo (15)

Recently uploaded

Recently uploaded (20)

jQuery Mobile :: Enlaces a páginas internas.