Sistema de ventanas con jQuery

Sistema de ventanas con jQuery

Hoy veremos como crear un completo sistema de ventanas con jquery dialgo y jquery dialog extend parecido al de cualquier sistema operativo como windows o linux. Este sistema de ventanas tendra la funcionalidad de minimizar y maximizar las ventanas, cerrar obviamente, contraer y restaurar, doble click y contraer, mover ventanas, etc.. Esto nos servira para implementar cualquier caracteristica que requiera ventanas en nuestros proyectos web con ayuda de jQuery, te animas a intentar?

Un sistema de ventanas con jQuery como windows

Como dijimos antes lo que haremos sera crear un sistema de ventanas con jquery ( dialog y extend ) para utilizar en nuestro proyectos web, algo asi como las de nuestro sistema operativo, o al menos lo intentaremos..

sistema de ventanas con jquery jonathanmelgoza

ya el estilo que les demos sera otra cosa pero nosotros te explicaremos como integrar las funciones de mover, minimizar, maximizar, contraer, restaurar, y mas..


Suscríbete!

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

Para esto sera necesario utilizar jQuery, jQuery Dialog, jQuery dialog extend.

Ventanas emergentes con jQuery Dialog

Vamos a necesitar las librerias jquery y jquery ui.

Podemos descargarlas o simplemente utilizar algun cdn para utilizarlas en linea, da igual.

Las mandamos llamar antes del cierre del body asi,

y el css de nuestro jquery ui dentro del head

Ahora agregamos el html de nuestros 3 divs que seran el contenido de nuestras 3 ventanas despues de nuestro contenido html, es decir despues del cierre de nuestra etiqueta html asi,

Ahora vamos ya a nuestro codigo javascript / jQuery que nos dara la funcionalidad de jquery dialog, para esto tenemos que abrir nuestras etiquetas de javascript despues de que cargamos la libreria de jquery y jquery ui asi

Lo primero sera inicializar nuestras 3 ventanas como elementos dialog y sus caracteristicas especiales dentro de la funcion ready de jquery..

Ahora agregamos 3 etiquetas de imagen a nuestro cuerpo de la pagina simulando ser iconos de escritorio asi..

Nos vamos a javascript y dentro de nuestro evento ready de jquery después de la inicializacion de nuestras ventanas vamos a dar la funcionalidad de doble click sobre nuestros iconos y a decirles que se abra nuestra ventana especifica así,

Hasta ahora nuestro proyecto luce así,

Nuestro proyecto hasta ahora

Luce bien no? pues ahora falta agregar la funcionalidad extra de minimizar, maximizar, restaurar, contraer y mas!

Funciones especiales con jQuery Dialog Extend

Ahora vamos a añadir algunas funcionalidades extras a nuestras ventanas, que se puedan maximizar, es decir ocupar toda la pantalla, regresar a su estado anterior, minimizar a una barra de ventanas en la parte inferior similar a la que tienes en windows o linux, collapsar minimizar o maximizar al dar doble click sobre el titulo de la ventana, etc..

Para esto vamos a recurrir al plugin jquery dialog extend el cual simplemente vamos a llamar despues de jquery ui asi,

y despues solo agregamos un poco de codigo a la inicializacion de nuestro dialog asi

lo mismo para las otras 2 ventanas.

Simplemente definimos si queremos  que aparezcan las opciones de cerrar, maximizar, minimizar, colapsar, que queremos que haga al doble click sobre la barra de titulo, en que lado queremos que se coloquen miminizadas y sus iconos.

Ahora nuestro proyecto de ventanas luce asi!

sistema de ventanas con jquery

Si tienes alguna duda déjame un comentario, si te gusto o te sirvió de algo compartenos en tus redes sociales.

Saludos!

5 Comentarios ¿Qué opinas tú del tema?

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *