Tutorial: Como Usar Jquery UI Dialog

jQuery UI Dialog, es un widget que forma parte de la librería del jQuery UI, que nos permite la creación de ventanas modales, de manera fácil y sencilla. Jquery UI Dialog como los demás widgets de la librería de jQuery UI sigue los estándares de jQuery y por lo tanto es bastante personalizable.

NOTA: Súper importante, estoy trabajando con la versión 1.8 del jQuery UI, y según e leído lo mas probable es que la en la versión 1.9 se modifique su forma de uso.

El widget jQuery UI Dialog, no requiere inicialización previa para empezar a trabajar aunque de todas manera lo podemos iniciar aparte, el widget requiere de un div en nuestra pagina con un id y el contenido que queramos que aparezca en la ventana modal. El contenido se puede parecer a esto:

<div id='dialog' style='display:none;' title='titulo de la ventana'>(contenido que quieres que aparezca en la caja de dialogo)</div>

Dentro de este div, podemos poner lo que necesitemos, ya sean formularios, imagenes, iframe, resultado de una llamada AJAX o todo junto si queremos. Aparte también podemos tranquilamente modificar el contenido del dialog con jQuery.html().

Requisitos para usar jQuery UI Dialog:

jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.position.js
jquery.ui.button.js(opcional, solo si se van a usar los botones)
jquery.ui.mouse.js (opcional, solo si vamos a usar draggable o resizable)
jquery.ui.draggable.js(opcional solo si se va a usar la opcion "dragabble: true")
jquery.ui.resizable.js

Parámetros del widget jQuery UI Dialog:

Aqui estan los más importantes(casi todos) para la lista completa: http://jqueryui.com/demos/dialog#options: 

• width: Especifica el ancho de la ventana modal, puede ser en numero o auto.
• heigth: Especifica el alto de la ventana modal, puede ser numero o auto.
• (min|max)width: especifica el ancho maximo o minimo de la ventana modal
• (min|max)heigth: especifica la altura maxima o minima de la ventana modal
• autoOpen: especifica si se abre o no automaticamente la ventana modal.
• buttons, botones que va a tener nuestra ventana de dialogo, con sus funciones.
• hide: efecto que sera usado cuando se cierre la ventana
• show: efecto que se usara cuando se abra la ventana
• draggable: define si es movible o no la ventana modal
• resizable: especifica si se puede o no redimenzionar la ventana
• modal: la ventana puede ser modal o no, si es verdad, pone un fondo en toda la pantalla semitransparente que impide que el usuario haga click en cualquier otro lado.
• position: ubicacion de la ventana modal en la ventana, opciones:  'center', 'left', 'right', 'top', 'bottom'.  o un array que puede contener dos pocisiones una con las "x" y otras con las "y", estas pocisiones pueden ser con una de las opciones antes puesta o con un numero.
• title: Especifica un titulo a la ventana
• zIndex: establece el zIndex para nuestra ventana modal
• dialogClass: agrega una clase a la ventana modal para poder definir estilos o lo que necesitemos.

 Eventos del widget jQuery UI Dialog:

http://jqueryui.com/demos/dialog#events

• open: permite especificar algunas opciones antes de que abre la ventana de dialogo, util para ventanas con formularios, donde queremos reiniciar lo que tiene el formulario.
• beforeClose: funcion que se ejecute antes de que se cierre la ventana, lo cual tambien nos permite cancelar el cierre de la ventana si retorna false.
• close: evento de cuando se cierra la ventana.
• create: evento de cuando se crea la instancia.
• focus: evento de cuando la ventana recibe el foco o es activada.
• eventos de draggable: dragStart, dragStop, drag.
• eventos de resizable: resizeStart, resizeStop, resize.

Metodos del widget jQuery UI Dialog:

http://jqueryui.com/demos/dialog#methods

• close: cierra la ventana de dialogo
• open: abre la ventana.
• destroy: destruye la ventana.

Ventajas y Desventajas del jQuery UI DIalog

La única desventaja que presenta Jquery UI Dialog frente a otros plugins con fancybox, es que este no trae ningún tipo de sistema ya pre-echo para galerías o enlaces que se carguen con iframe o ajax, si que es simplemente una ventana modal y las demás funcionalidades se las tenemos que dar nosotros mismos o mezclarlo con otro plugin. Pero por otro lado tiene una gran ventaja frente a fancybox, porque no requiere pre-instalación de la ventana de dialogo sino que lo podemos crear cuando lo necesitemos.

Hasta aquí llega el tutorial por hoy, después pondre ejemplos mas concretos porque con la practica se hace al maestro.

Chao, Hasta una prosxima entrega!!