Revisiones:
El DynWindow Objeto es un objeto DHTML el cual crea una ventana halable y contiene un objeto scroll para ver los ficheros externos - imitando de como una ventana real OS trabaja. Una posible utilización para esto es por ejemplo creando unas buenas ventanas de dialogo o proveyendo una forma alternativa para ver documentos DHTML.
No tomé mucho tiempo para hacer este objeto realmente al gusto de quién quiera, pero la fuente de código deberá ser muy fácil de seguir que podrás extenderlo de cualquier manera que desees. Este objeto utiliza cada uno de los DynLayer, Drag, y Scroll objetos, y es un ejemplo perfecto de que bien estos objetos pueden ser hechos para trabajar conjuntamente.
Iniciación:
Lo primero que tienes que hacer es incluir todos los 4 de dynlayer.js, scroll.js, drag.js, y dynwindow.js.
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="scroll.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="drag.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="dynwindow.js"></SCRIPT>
El DynWindow funciona exactamente la misma manera como funcionan los objetos Select y Scroll , y también su iniciación es muy similar. En algún lugar del JavaScript antes cargarlo finalmente a la página tienes que llamar lo siguiente:
objectName = new DynWindow("objectName",x,y,width,height) objectName.build()
Ejemplo:
mywindow = new DynWindow("mywindow",50,50,300,300) mywindow.build()
En la función init() tienes que llamar el DynWindow´s método activada()activate() y iniciar el código para activar el Drag Objet :
function init() { mywindow.activate() // inicia los eventos del raton document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) }
Las funciones ratónAbajo "mouseDown", ratónMueva "mouseMove", y ratónArriba "mouseUp" son directamente del Drag Object lección excepto. Nota que en este caso tienes que absolutamente llamarrouteEvent(e) para Netscape:
function mouseDown(e) { if ((ns4 && e.which == 1) || ie4) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop drag.mouseDown(x,y) if (drag.active) { // pon mas código aquí para hacer algo diferente al comenzar un drag return false } else { if (ns4) routeEvent(e) return true } } } function mouseMove(e) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop if (drag.active) { drag.mouseMove(x,y) // put more code here to do something else while dragging return false } else { if (ns4) routeEvent(e) return true } } function mouseUp(e) { var x = (ns4)? e.pageX : event.x var y = (ns4)? e.pageY : event.y+document.body.scrollTop if (drag.active) { drag.mouseUp() // put more code here to do something else when finished a drag return false } else { if (ns4) routeEvent(e) return true } }
En el cuerpo "BODY" de tu documento debes escribir la propiedad div del DynWindow:
<SCRIPT LANGUAGE="JavaScript"> document.write(mywindow.div) </SCRIPT>
Utilización de DynWindow
El DynWindow actualmente contiene muy poco código, este solamente empaca los objetos Drag y Scroll dentro de una nuevo objeto.
Hay 3 métodos principales:
close() - actualmente solo esconde el nivel de arriba de la capa, llamado cuando cliqueas el botón de cerrar "close" en la ventana
minimize() - Yo ni siquiera sabía que hacer con este método, entonces también lo hice esconder la ventana cuando cliqueas el botón de disminuir. Si vas a implementar este objeto probablemente tienes que extender el código para hacer cualquier otra cosa como crear un icono o algo así.
setTitle(title) - Fija el título de la ventana utilizando el tag style .windowTitleStyle (también ver Atributos de Scroll).
También hay otros métodos internos (para hacer los rollovers en la imagen etc). Con toda libertad lee la fuente de código para ver como opera.
DynLayer Atributos
El DynWindow aplica una propiedad lyr la cual encañona a la capa en el nivel alto iniciada como un DynLayer. Utilizando esto puedes esconder "hide", mostrar "show" o mover "move" la ventana entera utilizando los métodos DynLayer:
mywindow.hide()
Atributos Scroll
El DynWindow también contiene un Scroll Objeto, así puedes aplicar cualquiera de los métodos de scroll al objeto scroll dentro del DynWindow. Esto es hecho por la propiedad scroll:
mywindow.scroll.load('file.html')
Los ficheros externos deben de llamar al mywindow.scroll.activate() y es probablemente una buena idea de fijar él titulo de la ventana al mismo tiempo:
<BODY onLoad="if (parent.Scroll) {parent.mywindow.scroll.activate(); parent.mywindow.setTitle('Text Page 1'); }">
Modificándolo al gusto
Este objeto todavía es un experimento, y hay como un millón de formas que puedo ver que alguien la gustaría hacer una modificacion personal en este (eg. Ficheros de menú, bordes en la ventana, colores diferentes, sombras etc.), así que el gusto es tuyo. Para editar cualquiera de las imágenes utilice, posición de las capas etc., vas a tener que editar el código actual en el objeto. El código DynWindow es bastante pequeño, y debe ser fácil de seguir. Si tienes algunas preguntas de cuales partes tienes que editar, por favor escríbeme a mi DHTML Forum.
Ver dynwindow1.html para un ejemplo DynWindow . Ver Fuente de Código
Fuente de Código
Descargar: dynwindow.js
Ver Fuente: dynwindow.js
Casa | Próxima Lección: Objeto Reloj |