Plugin Dialog, el componente para crear cajas de diálogo dinámicas que ofrecen las librerías para creación de interfaces de usuario jQuery UI.
Estamos revisando los plugins más interesantes que ofrecen las librerías jQuery UI para crear interfaces de usuario. Sin lugar a dudas uno de los más importantes y versátiles de entre los componentes que nos podremos encontrar es Dialog, una herramienta completa para crear cajas de diálogo perfectamente configurables.
Esas cajas de diálogo sirven para mostrar a los usuarios mensajes emergentes en ventanas DHTML, es decir, por medio de una capa que se superpone al contenido de la página. Estas capas se pueden configurar de la forma con la que el desarrollador necesite y mostrar todo tipo de mensajes. Además por medio de los Javascript de la librería jQuery, sin que tengamos que hacer nada, el usuario podrá redimensionar las cajas de diálogo y arrastrarlas a otros puntos de la página.
Como podréis ver a lo largo de este artículo, es un componente que tiene un aspecto muy atractivo y que además gracias a su versatilidad lo podremos utilizar en multitud de ocasiones. Además tenemos disponible uno de los comportamientos dinámicos más demandados por las personas, las denominadas cajas de diálogo "modal box", esas que cuando están activas hacen que la página se oscurezca y se inhabilite, de modo que el usuario no pueda seguir haciendo cosas hasta que se cierre la ventana.
Crear cajas de diálogo
Como paso previo necesitaremos haber incluido el código Javascript y CSS de las librerías jQuery UI, tal como se explica en el artículo Empezar a usar jQuery UI en una página web. Una vez lo tenemos, necesitaremos crear un DIV con el contenido que queramos mostrar en la caja de diálogo. Este DIV lo podremos colocar en el código HTML de la página y más adelante explicaremos cómo se podría crear sobre la marcha con código Javascript y jQuery. Así pues, tendremos el HTML siguiente escrito en algún lugar de la página, es indiferente dónde.
Esta es la caja de diálogo más básica , que se puede redimensionar y arrastrar a otra posición. Además, se puede cerrar con el icono del aspa "X" que aparece en el titular de la caja.
Como se puede ver, se le ha indicado un atributo id, para asignarle un nombre a este DIV. Además hemos utilizado también un atributo en el DIV no habitual, que es el title, cuyo valor se utilizará como título en la caja de diálogo.
Ahora, tendremos que realizar el código Javascript para invocar el método que hará que ese DIV se convierta en una caja de diálogo, gracias a jQuery UI, casi por arte de magia!
$("#dialogo").dialog();Como se puede ver, por medio del objeto jQuery que hemos seleccionado con "#dialogo", osea, el DIV anterior, invocamos el método dialog(), que hará que la caja de diálogo se muestre en la página, con el contenido indicado en el HTML del DIV.
Podemos verla en una página aparte.
El código fuente completo de este primer ejemplo es el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Caja de diálogo jQuery UI</title>
<link type="text/css" href="css/dot-luv/jquery-ui-1.8.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
</head>
<body>
<h1>Caja de diálogo jQuery UI</h1>
<p>Cuando se terminen de cargar los scripts, aparecerá una caja de diálogo...</p>
<div id="dialogo" title="Título de la caja" style="display: none;">
<p>Esta es la caja de diálogo más básica, que se puede redimensionar y arrastrar a otra posición. Además, se puede cerrar con el icono del aspa "X" que aparece en el titular de la caja.</p>
</div>
<script>
$(document).ready(function(){
$("#dialogo").dialog();
});
</script>
</body>
</html>Espero que las personas que hayan seguido los cursos y talleres de jQuery en DesarrolloWeb.com no tengan ningún problema en entender el código anterior. Como se puede haber visto, para crear una caja de diálogo con jQuery UI es suficiente una línea de código.
Pero claro que, a medida que queramos configurar el comportamiento de estas cajas de diálogo y aprovechar sus posibilidades, tendremos que conocer más a fondo el componente y para eso nos vendrá muy bien la documentación, que se puede acceder en la URL: http://jqueryui.com/demos/dialog/
En este artículo y algunos siguientes vamos a explorar muchas de las cosas que podremos hacer con las cajas de diálogo, pero lo cierto es que las posibilidades son enormes y su uso dependerá también de las necesidades con las que nos encontremos. Así que a lo largo de los próximos artículos vamos a ir implementando a las tareas más habituales que podréis necesitar, como hacer que las cajas de diálogo sólo se abran cuando nosotros queramos, o cuando el usuario pulse un enlace, que tengan ciertas dimensiones, que aparezcan en un lugar determinado y con una animación, que tengan botones para realizar acciones adicionales, que respondan a eventos, etc.
Crear el DIV de la caja de diálogo sobre la marcha con jQuery
Antes de acabar este primer artículo voy a tratar un caso interesante, que tiene más que ver con jQuery que con el propio plugin Dialog. Antes vimos cómo convertir un DIV escrito en el código HTML de la página en una caja de diálogo y ahora vamos a mostrar cómo podríamos generar ese DIV dinámicamente con instrucciones Javascript y jQuery, para abrir una caja de diálogo sin tener que haber ningún DIV en el código.
var caja2 = $('<div title="Segunda caja"><p>Esta es una segunda caja...</p></div>');
caja2.dialog();Como se puede ver, en la primera línea creamos un objeto jQuery a partir de un pedazo de código HTML, que es una capa DIV. Ese elemento DIV que estamos creando lo almacenamos en la variable caja2 y luego invocamos a dialog() a través de ella.
El código completo de este ejemplo sería el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Caja de diálogo jQuery UI</title>
<link type="text/css" href="css/dot-luv/jquery-ui-1.8.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<style type="text/css">
body{
font-size: 0.75em;
font-family: verdana, arial, helvetica;
}
</style>
</head>
<body>
<h1>Caja de diálogo jQuery UI</h1>
<p>Cuando se terminen de cargar los scripts, aparecerá una caja de diálogo... pero esta vez la vamos a crear de otra manera.</p>
<script>
$(document).ready(function(){
var caja2 = $('<div title="Segunda caja creada"><p>Esta es una segunda caja de diálogo...</p><p>En esta ocasión generé en tiempo de ejecución el DIV con Javascript y luego, sin llegar a mostrar el DIV en la página, lo convierto en una caja de diálogo.</p></div>');
caja2.dialog();
});
</script>
</body>
</html>Podemos ver en una página aparte el ejemplo de esta segunda caja de diálogo.
En el siguiente artículo continuaremos explicando ejemplos de tipos de cajas de diálogo con jQuery UI.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...