Creando y destruyendo Capas "Layers"

En los dos browsers hay una forma de incluir más capas en la página rápidamente (después que la página esta totalmente cargada). Además esta es una situación donde la solución es completamente diferente entre los dos browsers. Como sea el caso aquí hay un obstáculo lisiado el cual no he podido solucionar, el cual hace imposible de utilizar esta técnica a un potencial mas alto.

Netscape:

Creando una capa nueva en Netscape:

En Netscape, para agregar a la página una capa nueva simplemente tienes que crear un nueva objeto Capa :

document.layers[id] = new Layer(width)

Para una capa acomodada tienes que llamar el nuevo comando para la capa así:

document.layers[parentLayer].document.layers[childLayer] = new Layer(width, document.layers[parentLayer])

Gracias a Bill Sager por enseñarme como hacer eso.

Después de creado la capa puedes entonces asignarles las propiedades y añadir el contenido al layer utilizando JavaScript:

document.layers[id] = new Layer(400)
document.layers[id].left = 40
document.layers[id].top = 100
document.layers[id].height = 300
document.layers[id].bgColor = "blue"
document.layers[id].visibility = "show"
document.layers[id].document.open()
document.layers[id].document.write("This is my content")
document.layers[id].document.close()
etc.

Una vez que todo esto ha sido hecho, puedes utilizar la capa como normal.

Removiendo la capa en Netscape :

Aunque no esta señalada especificamente en la documentación, siempre puedes borrar una capa tan fácil como cuando se creó. Para realizar esto tienes que esconder la capa, y luego borrar la referencia a esta:

document.layers[id].visibility = "hide"

Internet Explorer

Creando una Nueva Capa en IE:

La habilidad de Internet Explorer para trabajar con HTML como si fuera una tira, te permite agregar todas los capas que desees. Recomiendo hacer esto utilizando insertAdjancentHTML(). Si utilizas la propiedad innerHTML causara unos resultados no esperados.

Para agregar otra capa (o cualquier otro HTML si es el caso) al cuerpo (body) del documento, puedes llamar este método de la manera siguiente:

document.body.insertAdjacentHTML(string)

Donde string, es una tira de texto o HTML que necesita estar atada al final de la página. Entonces para crear una capa puedes pasar un tag DIV con el asignado style utilizando la técnica vieja inline si eso es lo que prefieres (recuerda IE no tiene problemas con styles inline):

document.body.insertAdjacentHTML('
<DIV ID="layerName" STYLE="position:aboslute; left:40; top:100;">
This is my content
</DIV>')

Para crear una capa acomodada puedes aplicar el método insertAdjacentHTML() a la capa madre (parent layer) justamente cuando haces al cuerpo (body) del documento:

document.all[id].insertAdjacentHTML(string)

Removiendo una capa en IE:

Inicialmente yo pensé que la única forma para borrar una capa en IE era de hacer una manipulación en tira para la propiedad de la página document.body.innerHTML . Como sea esto crea unos problemas muy severos como introducir HTML fantasma. Afortunadamente, unos pocos otros JavaScripters (Erik Arvidsson y Thomas Brattli) mencionaron, que había una cabida para borrar una capa en IE. Puedes usar una combinación de innerHTML y outerHTML en esa particular capa solamente. Funciona y no causa el problema visto como cuando se utiliza document body inner HTML.

Para remover una capa puedes hacer estos comandos:

document.all[id].innerHTML = ""
document.all[id].outerHTML = ""

Las Funciones createLayer() and destroyLayer()

createLayer(id,nestref,left,top,width,height,content,bgColor,visibility,zIndex)

destroyLayer(id,nestref)

El uso debe ser obvio - id y nestref son lo mismo para un Dynlayer. Las propiedades requeridas son, izquierda (left), arriba (top) y el ancho (width), el resto es opcional. Después que has creado la capa podrás asignar DynLayers a ellas y trabajar con ellas de esa manera. He creado 2 demostraciones que ilustrara de como podrás utilizar esta función.

createdestroy1.html [fuente] - Un ejemplo simple que nos enseña una capa siendo creada y destruida. También le asigna un DynLayer y los destruye también.

createdestroy2.html [fuente] - un ejemplo mas complejo es utilizando el objeto arrastrar para crear y destruir múltiple capas.

Fuente de Código

createdestroy.js

Casa Próxima Lección: CGI Communicaciones
copyright 1998 Dan Steinman