jquery mobile :: cuadros de diálogo

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).

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.

index.html <!DOCTYPE html>  <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álogo</p> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="./cuadrodialog01.html" data-rel="dialog">Cuadro de diálogo</a></li> <li><a href="#dialogoTema" data-rel="dialog">Cuadro de diá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á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.

cuadrodialog01.html <!DOCTYPE html>  <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ón</h1> </div> <div data-role="content"> <h2>Cuadro de diálogo 01</h2> <p>¿Seguro que quieres borrar este libro?</p>   <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.

jquery mobile :: cuadros de diálogo

Education