Con esto de la migración de sistemas de escritorio a la Web, creo que a todos nos ha pasado que el cliente solicita sea lo más parecido a la versión saliente y en html, lo que implica tener que crear ventanas de diálogo sobre todo las de tipo modal, que nos permitan interactuar con la aplicación sin perder la pantalla actual, como por ejemplo confirmar la adición o eliminación de registros, confirmar un envío de correo, enviar advertencias, abrir formularios pequeños, etc., esto es posible con css y en ocasiones es un poco tedioso y complejo, pero ya existen librerías que generalmente en su nombre utilizan las siglas UI por (User Interfase por sus siglas en inglés) y son realmente útiles y muy fáciles de utilizar e implementar.

Comúnmente creamos las ventanas de diálogo con puro html y css, lo que en algunas ocasiones nos resulta un poco complejo a la hora de realizar interacción con las mismas, agregar ciertos botones, etc. Para esto podemos hacer uso de dos frameworks escritos en javascript que en este momento están teniendo mucho auge: jQuery y jQuery UI.

En el post Implementación de Ventana Modal con jQuery y jQuery UI creamos ventanas con diferentes parámetros.

El código completo se puede descargar desde github

Video Tutorial

jQuery UI

Página Oficial jQuery UI

 

jQuery

Página Oficial jQuery

 

Ejercicio

Desarrollar un botón, que al hacer clic sobre este despliegue una ventana modal con un aviso y dos botones, jQuery y jQuery UI cada uno nos enviará al respectivo sitio oficial.

Paso 1

Ingresamos a la página oficial de jQuery UI y descargamos el pluggin, para este ejercicio usaremos las características que se muestran en la imágen, el tema lo dejo a su elección. Es importante mencionar que al descargar este, ya esta incluido jquery

opciones descarga

Opciones jQuery UI

Paso 2

Desempaquetar el archivo y lo colocamos dentro de la carpeta donde implementaremos nuestro ejercicio, en lo personal siempre creo la siguiente estructura:

 

Ubicación jquery

Estructura Sitios

Paso 3

Crear de documento HTML

 

ejemplo jquery ui

Pantalla de Inicio

Código

Creando Ventanas de Diálogo

HTML / jQuery / jQuery UI

button dialog

Diálogo Sencillo

cazaresluis.com

Paso 4

Ahora vamos a ordenar con CSS nuestro index.html hasta obtener la vista deseada, el siguiente código se agregar entre las etiquetas <head></head>

 

Paso 5

Ahora vamos a insertar un div que será nuestra ventana de diálogo, esta deberá ir despues de la apertura de la etiqueta, para posteriormente crearla por medio de jQuery UI

Nuestro código HTML final deberá quedar de la siguiente manera:

Creando Ventanas de Diálogo

HTML / jQuery / jQuery UI

button dialog

Diálogo Sencillo

cazaresluis.com

Implementacion de jQuery y jQuery UI

Con este código javasript lograremos obtener nuestra ventana de diálogo, el botón que la abre y generar las acciones a realizar al hacer clic sobre cada uno de los botones resultantes

jquery dialog()

Ventana de Diálogo Final


Explicación del código

Crear botón que abre la ventana de diálogo

HTML

Diálogo Sencillo

javaScript (jquery ui)

Este código aplica un CSS que le da vista de botón utilizando el tema que previamente seleccionamos, se leería así:

Busca la etiqueta con id igual a dialogoSencillo y aplicale la función button

Crear ventana de diálogo

HTML

javaScript

Este código aplica formato de ventana de diálogo modal y asigna las acciones que se ejutarán al dar clic en cada botón, se lería de la siguiente manera:

Busca la etiqueta con id igual a dialogo y dale formato de diálogo que no se abra automáticamente, que sea del tipo modal, con un largo de 350 pixeles y un alto de 200 pixeles; que cree un botón que al dar clic abra el url http://jquery.com, otro que al dar clic abra el url http://jqueryui.com y uno más que al dar clic simplemente cierre la ventana de diálogo

Asignar la función de abrir la ventana de diálogo

javaScritp

Este código se encarga de asignar la fución al botón que muestra la ventana de diálogo y se leería de la siguiente manera:

Busca la etiqueta con id igual a dialogoSencillo, y cuando se haga clic sobre este, abre la ventana de diálogo con id igual a dialogo

De esta forma ya tenemos lista nuestra ventana de diálogo modal, más adelante creare un ejemplo usando AJAX

En el post Implementación de Ventana Modal con jQuery y jQuery UI creamos ventanas con diferentes parámetros.