jQuery Mobile:: Navegación
Vamos a crear una pequeña aplicación con las siguientes características:
- La aplicación tendrá...
Cuando pulsemos sobre “Nombre”, nos deberá aparecer una página con las si-
guientes características:
 El título de la pág...
Cuando pulsemos sobre “Apellidos”, nos deberá aparecer una página con las si-
guientes características:
 El título de la ...
Cuando pulsemos sobre “Ciudad”, nos deberá aparecer una página con las si-
guientes características:
 El título de la pág...
tarea2.html
<!DOCTYPE html>
<html>
<head>
<title>Aplicación jQuery Mobile</title>
<meta charset="UTF-8">
<meta name="viewp...
Nota: Utilizamos <a href="#paginamenu" data-icon="arrow-l">Anterior</a> en la cabecera
de la página data-role="header" par...
Próxima SlideShare
Cargando en…5
×

jQuery Mobile :: Enlaces a páginas internas.

948 visualizaciones

Publicado el

jQuery Mobile :: Enlaces a páginas internas.

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
948
En SlideShare
0
De insertados
0
Número de insertados
346
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

jQuery Mobile :: Enlaces a páginas internas.

  1. 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. 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. 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. 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. 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&oacute;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&oacute;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&oacute;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&oacute;n</h1> </div> </div> </body> </html>
  6. 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.

×