En el artículo anterior escribí sobre algunos de los controles que nos aporta JQuery UI. En este artículo voy a escribir sobre una funcionalidad que, en mi opinión, es de las más importantes a la hora de trabajar con formularios: El cuadro de diálogo.

Mediante este cuadro de diáologo, no sólo podremos mostrar mensajes simples o preguntas de confirmación, si no que además podremos establecer formularios completos, con la ventaja que eso supone de cara al dinamismo de nuestra página.

Lo que voy a hacer en este tutorial es, basándome en el tutorial de Introducción a JQuery UI, añadir un mensaje de confirmación al botón de Insertar.

El código, tal y como había quedado en el tutorial anterior es el siguiente:

Teniendo en cuenta el código, comenzamos a trabajar con el cuadro de diálogo. La primera parte es diseñar el cuadro de diálogo en un div oculto, sin los botones del cuadro diálogo. En este ejemplo preguntaremos “¿Está seguro de que desea registrar el candidato?” Y un mensaje más pequeño. Los botones serán “” y “No“, aunque en esta primera parte no se incluyen.

Una vez tengamos el HTML, sólo queda el código JQuery. En una función Registrar, que se llama desde el evento “onclick” del botón, crearemos el cuadro de diálogo mediante el método .dialog().

Las opciones que hemos utilizado son las siguientes:

  • modal: Indica al cuadro de diálogo si tiene que bloquear la página para que no se pueda utilizar mientras el diálogo está abierto
  • title: Título de la ventana de diálogo
  • width: Anchura de la ventana de diálogo
  • resizable: Indica si el tamaño del cuadro de diálogo es alterable
  • show: Permite establecer un efecto y una duración a la hora de mostrar el cuadro de diálogo
  • hide: Permite establecer un efecto y una duración a la hora de mostrar el cuadro de diálogo
  • buttons: Establece una colección de botones indicando el texto y la función que ejecutarán.

Una vez que se han establecido esas opciones, si se ha de cerrar y abrir el diálogo de nuevo, se puede hacer mediante .dialog(“close”) y .dialog(“open”).

Con esto ya hemos visto la funcionalidad del cuadro de diálogo y el nivel de comunicación con el usuario que esto aporta a nuestras páginas.

¡Hasta la próxima!

Rupert.