Sistema de ventanas con jQuery

Sistema de ventanas con jQuery

Sistema de ventanas con jQuery
5 (100%) 5 votos

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..


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

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!

Sistema de ventanas con jQuery
5 (100%) 5 votos

5
Dejar un comentario

avatar
2 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Ricardo AvalosJonathan Melgoza Recent comment authors
  Subscribe  
Notify of
Ricardo Avalos
Guest
Ricardo Avalos

Amigo Jonathan,

Me bajé el último ejemplo y le agregué el parámetro que comentabas al dialog y lamentablemente no funciona 🙁

Muchos saludos!!!!

Ricardo Avalos
Guest
Ricardo Avalos

Excelente publicación, te felicito!! Una consulta sí, el único y gran problema que tiene es su falta de responsividad, si empiezo a ajustar los tamaños de ventana emulando un movil este no se ajusta.

Se me ocurria combinar ésto con boostrap y colocar todo dentro de un contenedor y respectiva columna aunque no se si funcionará,ya que cuando hice pruebas al aachicar la ventana, aparecía ña barra de scroll, lo cual no sería lo optimo para un movil, sino que se ajustara de acuerdo al tamaño…. alguna sugerencia??

Ricardo Avalos
Guest
Ricardo Avalos

excelente sugerencia, voy a bajarlo y vere si puedo habilitar el parametro. te cuento como me fue! si puedo ayudarte con algo solo avisa, tienes mi correo y web. Muchos saludos y te repito las felicitaciones por un magnifico articulo!!