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.
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.
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.
Compartir en redes sociales
4 comentarios revisados:| Agradeciemientos Por: Alviz | 01/6/2010
|
| Problemas con la segunda caja Por: Juan | 22/6/2010
|
| Opciones de la caja | 30/6/2010 |
 TOTTOV | Donde descargo el ejemplo completo | 07/3/2012 |
Usuarios: 
19 de May de 2010
Valoración del artículo:
