jQuery Mobile Navegación Páginas
•
0 gostou•2,201 visualizações
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)
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a jQuery Mobile Navegación Páginas
Semelhante a jQuery Mobile Navegación Páginas (17)
Mais de jubacalo
Mais de jubacalo (15)
Último
Último (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.