jQuery Mobile:: Cuadros de diálogo
Vamos a crear una pequeña aplicación que muestra la implementación de cuadros
de diálog...
Si pulsamos en el ítem “Cuadro de diálogo” nos abrirá a través de un enlace a
página externa el siguiente cuadro de diálog...
index.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change thi...
cuadrodialog01.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To c...
Próxima SlideShare
Cargando en…5
×

jQuery Mobile :: Cuadros de diálogo

1.236 visualizaciones

Publicado el

jQuery Mobile :: Cuadros de diálogo

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
1.236
En SlideShare
0
De insertados
0
Número de insertados
328
Acciones
Compartido
0
Descargas
5
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

jQuery Mobile :: Cuadros de diálogo

  1. 1. jQuery Mobile:: Cuadros de diálogo Vamos a crear una pequeña aplicación que muestra la implementación de cuadros de diálogo en jQuery Mobile. Un cuadro de diálogo no es más que otro modo de mostrar una página en nuestra aplicación Web. Por tanto es una página con una semántica diferente. Estructura de la aplicación en Netbeans La aplicación consta de dos documentos HTML 5. El documento index.html imple- menta una lista con dos ítems que nos permitirán abrir respectivamente dos cuadros de diálogo (uno de ellos personalizado con temas).
  2. 2. Si pulsamos en el ítem “Cuadro de diálogo” nos abrirá a través de un enlace a página externa el siguiente cuadro de diálogo. El cuadro de diálogo anterior tiene un botón [x] en su cabecera que nos permite cerrarlo y volver a la página principal. Por otro lado consta de dos botones:  [Sí, borrar]: En una aplicación típica este botón nos llevaría a una página, por ejemplo PHP, donde realizaríamos el borrado. En este ejemplo simplemente nos abre un pop-up con un mensaje.  [Cancelar]: Cierra el cuadro de diálogo dejándonos en la página principal. Si pulsamos en el ítem “Cuadro de diálogo con tema” nos abrirá a través de un enlace a página interna un cuadro de diálogo personalizado con temas.
  3. 3. index.html <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>TODO supply a title</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" align="center"> <p>Cuadros de di&aacute;logo</p> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="./cuadrodialog01.html" data-rel="dialog">Cuadro de di&aacute;logo</a></li> <li><a href="#dialogoTema" data-rel="dialog">Cuadro de di&aacute;logo con tema</a></li> </ul> </div> <div data-role="footer" align="center"> <p>bitCoach::Juan B. Cascallar Lorenzo</p> </div> </div> <div data-role="page" id="dialogoTema"> <div data-role="header" data-theme="b"> <h6>Dialog Theme</h6> </div> <div data-role="content" data-theme="b"> <p>Este es un cuadro de di&aacute;logo personalizado.</p> <a href="#" data-role="button" data-theme="a" data-rel="back">Aceptar</a> </div> </div> </body> </html> Tal como se observa en el código anterior, para abrir una página de cuadro de diálogo, debemos utilizar data-rel=”dialog” dentro de la etiqueta a en la que va el enlace. El primero (<a href="./cuadrodialog01.html" data-rel="dialog">) es un enlace a página externa, y el segundo (<a href="#dialogoTema" data-rel="dialog">) es un enlace a página interna. Los dos nos abren las respectivas páginas con la semántica de cuadro de diálogo. La página (<div data-role="page" id="dialogoTema">) implementa un cuadro de diálogo que se ha personalizado aplicando temas. Nota: Un tema es un grupo de definiciones para el diseño, los estilos y los colores. Cada tema incluye un conjunto de muestras de color que podemos cambiar en cualquier punto de nuestra aplicación Web. Las muestras de color se definen por una letra, de la a a la z.
  4. 4. cuadrodialog01.html <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>TODO supply a title</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="alert"> <div data-role="header"> <h1>Confirmaci&oacute;n</h1> </div> <div data-role="content"> <h2>Cuadro de di&aacute;logo 01</h2> <p>¿Seguro que quieres borrar este libro?</p> <!-- Nos llevaria a una página de borrado PHP por ej.--> <!-- En este caso lo indicamos con un pop-up--> <a href="#popupBasic" data-role="button" data-rel="popup">Si, borrar</a> <div data-role="popup" id="popupBasic"> <p>Nos llevaría a una página de borrado PHP, por ejemplo.<p> </div> <a href="./index.html" data-role="button">Cancelar</a> </div> </div> </body> </html> Como vemos en el código anterior tenemos un cuadro de diálogo con dos boto- nes. El primero nos lanza un pop-up que nos es más que un div con el rol popup (para ello en el enlace añadimos data-rel="popup") . El segundo botón cierra el cuadro de diálogo y nos sitúa en la página principal.

×