Cómo configurar las cajas de diálogo a través de un objeto de opciones que enviamos al método dialog(), de jQuery UI. Vemos también cómo hacer una caja modal.
En el artículo anterior comenzamos a explicar lo que son las cajas de diálogo y cómo jQuery UI ofrece un fantástico plugin para implementarlas. Además vimos un par de ejemplos iniciales que convendría tener presentes antes de continuar con el presente ejemplo.
Como vimos, existe un método llamado dialog() que tenemos que invocar para convertir un elemento DIV en una caja de diálogo. Lo que no habíamos visto todavía es que a este método podemos pasarle parámetros para configurar dicha caja, a partir de una serie de opciones. Todas las opciones tienen valores por defecto, con lo que en los anteriores ejemplos, simplemente estábamos abriendo una caja de diálogo configurada por defecto.
Las opciones de configuración las tenemos que enviar en notación de objeto, indicando una serie de atributos u opciones con sus diferentes valores. Podríamos ver un ejemplo de caja de diálogo configurada con diferentes valores que los estándar:
$("#dialogo").dialog({
modal: true,
title: "Caja con opciones",
width: 550,
minWidth: 400,
maxWidth: 650,
show: "fold",
hide: "scale"
});Como se está viendo en el código anterior, se está creando una caja de diálogo a partir de un elemento de la página que tiene el identificador id=dialogo. Además, al método dialog() le estoy pasando un objeto formado por distintas propiedades.
Podemos ver cómo sería la caja del anterior ejemplo en una página aparte.
Caja modal (modal box)
Una de los ejemplos más recurridos y de las preguntas que seguro solicitarán más personas es cómo hacer las cajas modales, lo que en inglés se llama "Modal box". Es una caja que al aparecer hace que toda la página se oscurezca, menos la propia caja de diálogo, para llamar la atención del usuario y no permitir que haga otras cosas, sino prestar atención al texto de la caja o a las acciones que solicite.
Esto se consigue con el primero de los atributos del objeto de opciones del código anterior.
modal: trueOtras options del cuadro de diálogo
Aparte de la propiedad para hacer cajas modales, hemos aplicado otra serie de atributos que comentamos a continuación:
title: Caja con opciones
La propiedad title sirve para cambiar el título de la caja de diálogo y se tiene en cuenta antes del contenido que pueda tener el atributo title del DIV con el que se ha hecho la caja.
width: 550
La propiedad width indica el ancho de la caja modal, en píxeles.
minWidth: 400
Es la anchura mínima permitida. Recordemos que el usuario puede redimensionar la caja, de modo que la anchura real de la misma podría variar. Si definimos el atributo minWidth nos aseguraremos que su anchura nunca baje de este valor en píxeles.
maxWidth: 650
De manera similar a minWidth, pero para definir una anchura máxima permitida.
show: "fold"
Con el atributo show podemos definir un efecto para que la caja de diálogo no se muestre de golpe sino con una transición suavizada. El valor de show que podemos seleccionar es una cadena de caracteres con alguno de los efectos posibles. Leer la nota sobre este tema.
hide: "scale"
Igual que el atributo show, pero sirve para definir la transición o efecto utilizado al cerrar la ventana de diálogo.
Algunos efectos que podremos asignar a la animación de mostrar u ocultar el cuadro de diálogo son "explode", "fold", "scale", "clip", "slide", etc. Es conveniente comentar que estos efectos no están creados exclusivamente para animar las cajas, sino para animar muchos otros componentes de jQueryUI.
Para poder activar cualquiera de estos efectos tenemos que haber descargado un paquete de jQuery UI que los contenga, es decir, haber seleccionado alguno de esos componentes de efectos cuando descargamos las librerías para interfaces de usuario.
Ahora podemos ver el código del ejemplo completo:
<!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">
<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({
modal: true,
title: "Caja con opciones",
width: 550,
minWidth: 400,
maxWidth: 650,
show: "fold",
hide: "scale"
});
});
</script>
</body>
</html>Hay que señalar que en este ejemplo hemos visto sólo un pequeño conjunto de opciones disponibles en el componente Dialog. Recordar siempre consultar la documentación para una completa referencia. En el siguiente artículo explicaremos cómo crear una caja de diálogo y abrirla sólo cuando el usuario pulse un enlace.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...