A continuación vamos a desarrollar unos cuantos ejemplos sobre el manejo de eventos.
En este ejemplo se ilustra cómo se puede cargar una página html dentro de un layer y cómo cambiar de tamaño el layer de forma dinámica.
<script language="JavaScript1.2">
// Funcion que cambia la anchura de el layer
function changeWidth(layer, delta) {
layer.bgColor = "#99bbff";
layerWidth = layerWidth + delta;
if (delta != 0)
layer.load("inc.html", layerWidth);
}
var oldX;
var elLayer = document.layers[0];
var layerWidth = elLayer.clip.width;
// primer paso, indicarle al layer que capture los eventos que queremos manejar
elLayer.document.captureEvents( Event.MOUSEUP | Event.MOUSEDOWN );
// segundo paso, escribir los manejadores de eventos
// Manejador para el evento Load de el layer
function resetCapture() {
elLayer.document.captureEvents( Event.MOUSEUP | Event.MOUSEDOWN | Event.MOUSEMOVE );
}
// Manejador para el evento MouseUp del el layer
function begindrag(e) {
elLayer.document.captureEvents(Event.MOUSEMOVE);
oldX=e.pageX;
return false;
}
// Manejador para el evento MouseMove del el layer
function drag(e) {
changeWidth(elLayer, e.pageX - oldX);
oldX = e.pageX;
return false;
}
// Manejador para el evento MouseUp del el layer
function enddrag(e) {
elLayer.document.releaseEvents(Event.MOUSEMOVE);
return false;
}
// tercer paso, asignarle los manejadores al objeto
elLayer.onload=resetCapture;
elLayer.document.onmousedown=begindrag;
elLayer.document.onmouseup=enddrag;
elLayer.document.onmousemove=drag;
</script>
Pulsa aquí para ejecutar el ejemploEn este ejemplo aparecen cuatro cuadrados de colores en los que se muestra un número. Si colocamos el ratón sobre algún cuadrado, éste comienza a crecer hasta un tamaño máximo. Una vez alcanzado ese tamaño, al colocarle el ratón encima, comenzará a decrecer hasta su tamaño mínimo.
<html>
<head>
<script language="JavaScript1.2">
var maxClip = 200;
var minClip = 0;
var maxClipContracted = 150;
var minClipContracted = 50;
var delta = 10;
// inicializa el layer de la esquina superior izquierda
function initializeTopLeft(n) {
var thisLayer = document.layers[n];
thisLayer.status = "waitingToExpand";
thisLayer.clip.top = maxClipContracted;
thisLayer.clip.left = maxClipContracted;
thisLayer.clip.bottom = maxClip;
thisLayer.clip.right = maxClip;
thisLayer.dLeft = -delta;
thisLayer.dTop = -delta;
thisLayer.dBottom = 0;
thisLayer.dRight = 0;
thisLayer.myPosition = "topLeft";
thisLayer.mySource="inc1.html"
thisLayer.myText="<layer top=160 left=168><h1>1</h1></layer>"
return false;
}
// inicializa el layer de la esquina superior derecha
function initializeTopRight(n) {
var thisLayer = document.layers[n];
thisLayer.status = "waitingToExpand";
thisLayer.clip.top = maxClipContracted;
thisLayer.clip.right = minClipContracted;
thisLayer.clip.bottom = maxClip;
thisLayer.clip.left = minClip;
thisLayer.dLeft = 0;
thisLayer.dTop = -delta;
thisLayer.dBottom = 0;
thisLayer.dRight = delta;
thisLayer.myPosition = "topRight";
thisLayer.mySource="inc2.html"
thisLayer.myText="<layer top=160 left=18><h1>2</h1></layer>"
return false;
}
// inicializa el layer de la esquina inferior izquierda
function initializeBottomLeft(n) {
var thisLayer = document.layers[n];
thisLayer.status = "waitingToExpand";
thisLayer.clip.bottom = minClipContracted;
thisLayer.clip.left = maxClipContracted;
thisLayer.clip.top = minClip;
thisLayer.clip.right = maxClip;
thisLayer.dLeft = -delta;
thisLayer.dTop = 0;
thisLayer.dBottom = delta;
thisLayer.dRight = 0;
thisLayer.myPosition = "bottomLeft";
thisLayer.mySource="inc3.html"
thisLayer.myText="<layer top=6 left=168><h1>3</h1></layer>"
return false;
}
// inicializa el layer de la esquina inferior derecha
function initializeBottomRight(n) {
var thisLayer = document.layers[n];
thisLayer.status = "waitingToExpand";
thisLayer.clip.bottom = minClipContracted;
thisLayer.clip.right = minClipContracted;
thisLayer.clip.top = minClip;
thisLayer.clip.left = minClip;
thisLayer.dLeft = 0;
thisLayer.dTop = 0;
thisLayer.dBottom = delta;
thisLayer.dRight = delta;
thisLayer.myPosition = "bottomRight";
thisLayer.mySource="inc4.html"
thisLayer.myText="<layer top=6 left=18><h1>4</h1></layer>"
return false;
}
// cambia la apariencia del layer
function changeNow (n) {
var thisLayer = document.layers[n];
if (thisLayer.status == "waitingToExpand") {
thisLayer.src=thisLayer.mySource;
expand(n);
} else if (thisLayer.status == "waitingToContract") {
contract(n);
}
return false;
}
// expande un layer
function expand (n) {
var thisLayer = document.layers[n];
thisLayer.status = "expanding";
thisLayer.clip.left=thisLayer.clip.left+thisLayer.dLeft;
thisLayer.clip.right=thisLayer.clip.right+thisLayer.dRight;
thisLayer.clip.bottom=thisLayer.clip.bottom+thisLayer.dBottom;
thisLayer.clip.top=thisLayer.clip.top+thisLayer.dTop;
// is the layer fully contracted? True if:
// the square is the top OR bottom left AND its clip left
// is less than or equal the minimum clip for contracted squares
// OR the square is the top OR bottom right AND its clip right
// is greater than or equal the max clip for contracted squares
if ((((thisLayer.myPosition == "topLeft") |
(thisLayer.myPosition == "bottomLeft")) &&
(thisLayer.clip.left >= minClip)) ||
(((thisLayer.myPosition == "topRight") |
(thisLayer.myPosition == "bottomRight")) &&
(thisLayer.clip.right <= maxClip)))
{
setTimeout("expand(" + n + ")", 50);
}
else
{
thisLayer.status = "waitingToContract";
}
return false;
}
// contrae un layer
function contract (n) {
var thisLayer = document.layers[n];
thisLayer.status = "contracting";
thisLayer.clip.left=thisLayer.clip.left-thisLayer.dLeft;
thisLayer.clip.right=thisLayer.clip.right-thisLayer.dRight;
thisLayer.clip.bottom=thisLayer.clip.bottom-thisLayer.dBottom;
thisLayer.clip.top=thisLayer.clip.top-thisLayer.dTop;
if ((((thisLayer.myPosition == "topLeft") |
(thisLayer.myPosition == "bottomLeft")) &&
(thisLayer.clip.left < minClipContracted)) ||
(((thisLayer.myPosition == "topRight") |
(thisLayer.myPosition == "bottomRight")) &&
(thisLayer.clip.right > maxClipContracted)))
{
setTimeout("contract(" + n + ")", 50);
}
else
{
thisLayer.status = "waitingToExpand";
thisLayer.document.write(thisLayer.myText);
thisLayer.document.close();
}
return false;
}
</script>
</head>
<body>
<layer id="topLeftBlock"
top="100" left="50" width="200" height="200"
bgColor="#ff5555"
onLoad = "initializeTopLeft(0)"
onMouseOver="changeNow(0)">
<layer top="160" left="168">
<h1>1</h1>
</layer>
</layer>
<layer id="topRightBlock"
top="100" left="250" width="200" height="200"
bgcolor="#5555ff"
onLoad = "initializeTopRight(1)"
onMouseOver="changeNow(1)">
<layer top="160" left="18">
<h1>2</h1>
</layer>
</layer>
<layer id="bottomLeftBlock"
top="300" left="50" width="200" height="200"
bgColor="#55ff55"
onLoad = "initializeBottomLeft(2)"
onMouseOver="changeNow(2)">
<layer top="6" left="168">
<h1>3</h1>
</layer>
</layer>
<layer id="bottomRightBlock"
top="300" left="250" width="200" height="200"
bgColor="#ffff55"
onLoad = "initializeBottomRight(3)"
onMouseOver="changeNow(3)">
<layer top="6" left="18">
<h1>4</h1>
</layer>
</layer>
<layer top="500">
<p></p>
</layer>
</body>
</html>
Pulsa aquí para ejecutar el ejemploUna aplicación muy vistosa de los nuevos manejadores de ejemplos es la posibilidad de hacer drag&drop.
El ejemplo que nos ocupa trata de hacer un sistema de ventanas al estilo Windows95 y similares dentro de una página Web.
El truco en este caso es definir una serie de layers (uno por ventana) de forma que los "adornos" (botones, barra de título, etc) son otros layers hijos del principal. Habrá un layer principal gris, que dará soporte al resto, así, cuando movamos este, todos van junto con él.
Como hijos de este layer soporte, están los de título, botones y el de contenido, que muestra el fichero html que vamos a ver en la "ventana".
Para hacer el drag&drop, tenemos que: cuando se pulse sobre el layer de título y se mueva el ratón, se debe desplazar el layer de soporte hasta que se suelte el botón; cuando se pulse sobre el layer de contenido y se mueva el ratón, se debe redimensionar el layer de soporte; cuando se pulse sobre el botón de cerrar, se debe hacer invisible.
En cuanto a los eventos a capturar, tenemos que: los layers de título, soporte y el botón de cerrar deben tratar el MouseDown; los layer de título y soporte deben tratar el MouseUp.
Debido a la jerarquía utilizada en el tratamiento de eventos, el layer de soporte, al contener a los otros, recibe los eventos y si decide no tratarlos, entonces los pasa a los otros layers para que los traten. Pero en este problema no nos interesa que él los trate primero, sino que queremos que los traten primero los otros layers y después él. Así que deberemos hacer que los eventos pasen la capa jerárquica para ver si la siguiente trata el evento o en otro caso, lo trata.
<html>
<head>
<style type="text/css">
.ventana {
font-family: arial;
font-size: 9pt;
}
</style>
</head>
<body>
<layer id="soporte" left="100" width="300" height="99" bgColor="#bbbbbb">
<layer id="titulo" top="2" left="2" width="295" height="18" bgColor="blue" class="ventana">
<font color="WHITE"> <b>Visor de DHTML</b></font>
</layer>
<layer id="botones" left="242" top="4">
<img src="min.gif">
<img src="max.gif">
<img src="cerrar.gif" onMouseDown="window.document.layers['soporte'].visibility='hide'">
</layer>
<layer id="contenido" class="ventana"
src="inc1.html" width="295" left="2" top="22" bgColor="white">
</layer>
</layer>
<script language="JavaScript1.2">
var anchoLayer=300;
var oldX;
var soporte = document.layers['soporte']
var titulo = soporte.document.layers['titulo']
var botones = soporte.document.layers['botones']
var contenido = soporte.document.layers['contenido']
// manejador para MouseDown del layer de soporte
function beginResize(e) {
var retval=soporte.document.routeEvent(e)
if (retval==true)
return false;
soporte.document.captureEvents(Event.MOUSEMOVE);
soporte.document.onMouseMove=resizeDrag;
oldX=e.pageX;
return false;
}
// manejador para MouseMove del layer de soporte
function resizeDrag(e) {
anchoLayer=anchoLayer+e.pageX-oldX;
if (e.pageX-oldX != 0)
contenido.load("inc1.html", anchoLayer-5)
contenido.clip.width=anchoLayer-5;
titulo.clip.width=anchoLayer-5;
soporte.clip.width=anchoLayer-1;
botones.left=anchoLayer-58;
soporte.clip.height=contenido.clip.height+24
oldX=e.pageX
return false;
}
// manejador para MouseUp del layer de soporte
function endResize(e) {
var retval=soporte.document.routeEvent(e)
if (retval==true)
return false;
soporte.document.onMouseMove=0;
soporte.document.releaseEvents(Event.MOUSEMOVE);
return false;
}
// manejador para MouseDown del layer de titulo
function beginDrag(e) {
titulo.document.captureEvents(Event.MOUSEMOVE);
titulo.document.onMouseMove=drag;
x_offset=e.layerX;
y_offset=e.layerY;
return true;
}
// manejador para MouseMove del layer de titulo
function drag(e) {
soporte.pageX=e.pageX-x_offset;
soporte.pageY=e.pageY-y_offset;
return false;
}
// manejador para MouseUp del layer de soporte
function endDrag(e) {
titulo.document.onMouseMove=0;
titulo.document.releaseEvents(Event.MOUSEMOVE);
return true;
}
titulo.document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
titulo.document.onMouseDown=beginDrag;
titulo.document.onMouseUp=endDrag;
soporte.document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)
soporte.document.onMouseDown=beginResize;
soporte.document.onMouseUp=endResize;
</script>
</body>
</html>
Pulsa aquí para ejecutar el ejemploEn este ejemplo veremos una forma de hacer el scroll en un layer.
La idea viene a ser bastante simple: definir un layer contenedor dentro del cual se definen otros que serán de los que se haga scroll (layers de contenido), y según unos controles, mover esos layers de contenido arriba o abajo dentro del layer contenedor un cierto número de pixels.
Deberemos definir varios layers, unos para hacer de soporte y otros para hacer las veces de flechitas de sube-baja (e incluso otro para la barra de scroll) y para elegir el texto o elemento que vamos a visualizar en el scroll.
Así pues, definiremos un layer principal para contener a todo el resto de layers (elementos a visualizar, elementos de control, etc). Dentro de éste definimos otro para seleccionar el elemento a visualizar, otro que nos servirá como apoyo a todos los layers-contenido y finalmente otro que contendrá los controles de subir y bajar.
La función principal para hacer el scroll se limitará a comprobar si hay eventos de ratón (MouseDown) o en caso contrario no hará nada. Si los hay, calcula si está o no en el tope superior (el tope inferior se especifica mediante una variable global). Sólo debe mover el texto si no está arriba del todo o abajo del todo, y el movimiento es simplemente incrementar o decrementar las coordenadas verticales del layer de contenido.
<html>
<head>
<script language="JavaScript1.2"><!--
// determino el tipo de navegador
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}
// inicializo el scroll
function init() {
scrollActive = 0;
scrollLimit = -200;
scrollContentShown = "elem1";
}
// realiza scroll en un elemento
function scroll(direction) {
if (scrollActive) {
if (n)
var top = eval("document.principal.document.elementos.document." +
scrollContentShown + ".top");
if (ie)
var top = eval(scrollContentShown + ".style.pixelTop");
if (direction == "up" && top < 0) { // ver si ya esta arriba del todo
var inc = 10; // mover de 10 en 10 px
if (n)
eval("document.principal.document.elementos.document." +
scrollContentShown + ".top += inc");
if (ie)
eval(scrollContentShown + ".style.pixelTop += inc");
setTimeout("scroll('up')",20);
}
if (direction == "down" && top > scrollLimit) {// ver si ya esta abajo del todo
var inc = -10; // mueve de 10 en 10 px
if (n)
eval("document.principal.document.elementos.document." +
scrollContentShown + ".top += inc");
if (ie)
eval(scrollContentShown + ".style.pixelTop += inc");
setTimeout("scroll('down')",20);
}
}
}
// cambia el elemento a desplazar
// which -> que elemento
// limit -> el maximo de px a dexplazarlo
function scrollChange(which,limit) {
if (n) {
eval("document.principal.document.elementos.document." + scrollContentShown +
".visibility = 'hide'");
eval("document.principal.document.elementos.document." + which +
".visibility = 'show'");
}
if (ie) {
eval(scrollContentShown + ".style.visibility = 'hidden'");
eval(which + ".style.visibility = 'visible'");
}
scrollContentShown = which;
scrollLimit = limit;
}
// muestra un objeto
function showObj(showObj) {
if (n) eval("document." + showObj + ".visibility = 'show'");
if (ie) eval(showObj + ".style.visibility = 'visible'");
}
// esconde un objeto
function hideObj(hideObj) {
if (n) eval("document." + hideObj + ".visibility = 'hide'");
if (ie) eval(hideObj + ".style.visibility = 'hidden'");
}
//--></script>
</head>
<body onLoad="init()">
<b><font color="#000095" size=+2>Ejemplo 7</font></b><br><br>
En este ejemplo vamos programar un scroll.<br><br><br>
<a href="javascript:showObj('principal')">Mostrar</a>
<a href="javascript:hideObj('principal')">Ocultar</a>
<div id="principal">
<div id="menuElem">
<table border="0" cellSpacing="0" cellPadding="0" width="90">
<tr><td align="right">
<a href="javascript:scrollChange('elem1',-200)">Elem. 1</a><br>
<a href="javascript:scrollChange('elem2',-200)">Elem. 2</a><br>
<a href="javascript:scrollChange('elem3',-200)">Elem. 3</a><br>
</tr></td>
</table>
</div>
<div id="elementos">
<div id="elem1">
<strong>Elemento 1</strong>
<p>
Esto es el texto de relleno del primer (1) elemento del scroll ¿te lo repito?
...
</p>
</div>
<div id="elem2">
<strong>Elemento 2</strong>
<p class="green">
Esto es el texto de relleno del segundo (2) elemento del scroll.<br><br>
...
</p>
</div>
<div id="elem3">
<strong>Elemento 3</strong>
<p class="purple">
Esto es el texto de relleno del TERCERO (3) elemento del scroll.<br><br>
...
</p>
</div>
</div>
<div id="desplazar">
<table border="0" cellSpacing="0" cellPadding="0" width="90">
<tr><td align="right">
<a href="javascript:void(null)"
onMouseDown="scrollActive=1;scroll('up')"
onMouseUp="scrollActive=0" onMouseOut="scrollActive=0">arriba</a><br>
<a href="javascript:void(null)"
onMouseDown="scrollActive=1;scroll('down')"
onMouseUp="scrollActive=0" onMouseOut="scrollActive=0">abajo</a>
</tr></td>
</table>
</div>
</div>
</body>
</html>
Pulsa aquí para ejecutar el ejemplo