jQuery Mobile Navegación Páginas
•
0 likes•2,201 views
jQuery Mobile :: Enlaces a páginas internas.
![Cuando pulsemos sobre “Nombre”, nos deberá aparecer una página con las si-
guientes características:
El título de la página debe ser: Aplicación jQuery Mobile
El encabezado de la página debe ser: Nombre
El pie de página debe ser: Información
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.](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to jQuery Mobile Navegación Páginas
Similar to jQuery Mobile Navegación Páginas (17)
More from jubacalo
More from jubacalo (15)
Recently uploaded
Recently uploaded (20)
jQuery Mobile Navegación Páginas
- 1. 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”
- 2. Cuando pulsemos sobre “Nombre”, nos deberá aparecer una página con las si- guientes características: El título de la página debe ser: Aplicación jQuery Mobile El encabezado de la página debe ser: Nombre El pie de página debe ser: Información 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.
- 3. Cuando pulsemos sobre “Apellidos”, nos deberá aparecer una página con las si- guientes características: El título de la página debe ser: Aplicación jQuery Mobile El encabezado de la página debe ser: Apellidos El pie de página debe ser: Información El contenido debe ser: Mis apellidos son: [vuestros apellidos] En el encabezado debe haber un botón de retroceso “Anterior” que al pulsarlo nos dirija a la primera página.
- 4. Cuando pulsemos sobre “Ciudad”, nos deberá aparecer una página con las si- guientes características: El título de la página debe ser: Aplicación jQuery Mobile El encabezado de la página debe ser: Ciudad El pie de página debe ser: Información El contenido debe ser: Mi ciudad es: [vuestra ciudad] En el encabezado debe haber un botón de retroceso “Anterior” que al pulsarlo nos dirija a la primera página.
- 5. 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"> <div data-role="header"> <a href="#paginamenu" data-icon="arrow-l">Anterior</a> <h1>Nombre</h1> </div> <div data-role="content"> <h5>Mi nombre es: Juan Bautista</h5> </div> <div data-role="footer"> <h1>Información</h1> </div> </div> <div data-role="page" id="paginaapellidos" data-title="Aplicación jQuery Mobile"> <div data-role="header"> <a href="#paginamenu" data-icon="arrow-l">Anterior</a> <h1>Apellidos</h1> </div> <div data-role="content"> <h5>Mis apellidos son: Cascallar Lorenzo</h5> </div> <div data-role="footer"> <h1>Información</h1> </div> </div> <div data-role="page" id="paginaciudad" data-title="Aplicación jQuery Mobile"> <div data-role="header"> <a href="#paginamenu" data-icon="arrow-l">Anterior</a> <h1>Ciudad</h1> </div> <div data-role="content"> <h5>Mi ciudad es: Madrid</h5> </div> <div data-role="footer"> <h1>Información</h1> </div> </div> </body> </html>
- 6. 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.