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

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,

<!-- scripts -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>

y el css de nuestro jquery ui dentro del head

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

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,

</html>

<!-- Ventanas -->
<div id="mipc_window" title="Mi PC">
<img src="sources/mipccontenido.jpg" width="500" heigh="500" />
</div>
<div id="picture_window" title="Mi Foto">
<img src="sources/picturecontenido.jpg" width="500" heigh="500" />
</div>
<div id="notepad_window" title="Block de Notas">
<textarea></textarea>
</div>

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

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
....
</script>

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

$(document).ready(function(){
$('#mipc_window').dialog({
width: '500',
height: '400',
position: { my: "left center", at: "right top",collision: 'fit fit', of: window},
autoOpen : false,
draggable: true,
resizable: true,
});
$('#picture_window').dialog({
width: '500',
height: '400',
position: { my: "left center", at: "left bottom",collision: 'fit fit', of: window},
autoOpen : false,
draggable: true,
resizable: true,
});
$('#notepad_window').dialog({
width: '500',
height: '400',
position: { my: "left center", at: "center center",collision: 'fit fit', of: window},
autoOpen : false,
draggable: true,
resizable: true,
});

});

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

<!-- Botones -->
<img id="mipc" src="sources/iconmipc.png" /><br/>
<img id="picture" src="sources/iconpicture.png" /><br/>
<img id="notepad" src="sources/iconnotepad.png" />

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í,

$("#mipc").on("dblclick",function(){
var create_dialog = $("#mipc_window");
if( create_dialog.dialog("isOpen") ) {
create_dialog.dialog("close");
} else {
create_dialog.dialog("open");
}
});
$("#picture").on("dblclick",function(){
var create_dialog = $("#picture_window");
if( create_dialog.dialog("isOpen") ) {
create_dialog.dialog("close");
} else {
create_dialog.dialog("open");
}
});
$("#notepad").on("dblclick",function(){
var create_dialog = $("#notepad_window");
if( create_dialog.dialog("isOpen") ) {
create_dialog.dialog("close");
} else {
create_dialog.dialog("open");
}
});

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,

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="sources/jquery.dialogextend.js"></script>

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

$('#mipc_window').dialog({
width: '500',
height: '400',
position: { my: "left center", at: "right top",collision: 'fit fit', of: window},
autoOpen : false,
draggable: true,
resizable: true
}).dialogExtend({
"closable" : true,
"maximizable" : true,
"minimizable" : true,
"collapsable" : true,
"dblclick" : "collapse",
"minimizeLocation" : "right",
"icons" : {
"close" : "ui-icon-circle-close",
"maximize" : "ui-icon-circle-plus",
"minimize" : "ui-icon-circle-minus",
"collapse" : "ui-icon-triangle-1-s",
"restore" : "ui-icon-bullet"
}
});

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