Implementación de cuadros de diálogo en jQuery Mobile

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.

Implementación de cuadros de diálogo en jQuery Mobile

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Implementación de cuadros de diálogo en jQuery Mobile

Semelhante a Implementación de cuadros de diálogo en jQuery Mobile (20)

Mais de jubacalo

Mais de jubacalo (8)

Último

Último (20)

Implementación de cuadros de diálogo en jQuery Mobile