Generar Capas es un concepto fácil de comprender y tiene muchas aplicaciones, especialmente cuando se desarrollan sitios enteros con Dynamic HTML, o en penetrar dentro de un DHTML más complejo. Utilizando los comandos document.write() podrás generar tus tags de CSS y DIV de acuerdo a las especificaciones que desees.
Muchas posibilidades están abiertas cuando tomas este camino:
Te mostraré de como llevar a cabo cada una de estas tareas con solamente seguir unas instrucionnes bien simples.
Para generar una capa es bastante elemental. Solamente tienes que utilizar el comando document.write() para script las CSS y DIV's. El truco es, tienes que document.write el tag <STYLE> a junto con el CSS. Si no lo haces, cosas tienden a no insertarse apropiadamente en Netscape. He encontrado la siguiente manera de ser la que causa menos problemas
var str = '<STYLE TYPE="text/css">\n'+
'#mylayerDiv {position:absolute; left:50; top:70; width:80; height:20; clip:rect(0,80,20,0); background-color:yellow; layer-background-color:yellow;}\n'+
'</STYLE>'
document.write(str)
Usualmente no encontrarás problemas en IE, pero he encontrado algunos problemas con Netscape los cuales son mejor de evitar para así no tener un fuerte dolor de cabeza.
Aferrase a esas líneas de guía y te va a ir bien.
A veces no es necesario de SCRIPT la escritura del DIV's. Solamente tendrás que hacer esto si estuvieras planeando en hacer un aparato "widget" de alguna cosa, o escribir muchos DIV's que son similares en alguna forma. Está funciona como es esperado:
<SCRIPT LANGUAGE="JavaScript"> str = '<DIV ID="mylayerDiv">my layer</DIV>' document.write(str) </SCRIPT>
Deja siempre el DIV's en el BODY del documento.
Entonces el machote básico de seguir aparecerá de la siguiente forma:
<HTML>
<HEAD>
<TITLE>The Dynamic Duo - Generated Layers Demo [Simple]</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var str = '<STYLE TYPE="text/css">\n'+
'#mylayerDiv {position:absolute; left:50; top:70; width:100; height:20; clip:rect(0,100,20,0); background-color:yellow; layer-background-color:yellow;}\n'+
'</STYLE>'
document.write(str)
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
<!--
var str = '<DIV ID="mylayerDiv">my layer</DIV>'
document.write(str)
//-->
</SCRIPT>
</BODY>
</HTML>
"javascript:viewExample('generate1-simple.html')"
Ejemplo: generate1-simple.html fuente
Algo he estado haciendo para que sea agradable de generar CSS y es utilizando una función central la cual devolverá la sintaxis del CSS para ti. De esta forma podrás evitar de escribir cada vez izquierda "left", arriba "top", ancho "width", altura "height" etc. para cada capa. Esto hace tu código mas limpio y ahorrará algo en el tamaño del fichero en caso de que planees hacer bastante de esto. De hecho, he encontrado agradable utilizando las 2 funciones siguientes que tiendo de no escribir del todo manualmente las CSS. Porque ofrecen un uso inmenso, he incluido estas en mi DynLayer.js también. De esta forma nada mas tienes que incluir estas funciones si no estas utilizando el DynLayer:
CSS Funciones de La Fuente de Codigo:
El sintaxis para llamar la css() función es:
css(id,left,top,width,height,color,vis,z,other)
La función css() se explica ella misma, excepto por lo siguiente ...
Lo más notable es como he trabajado con los valores de altura "height" y recortar "clip". 99% del tiempo deseas fijar la altura de tu capa, y también deseas recortar la capa a ese mismo valor. Por ejemplo, si deseas hacer un cuadrado coloreado, debes de tener el mismo ancho "width " y la misma altura "height" que los valores de recorte derecho y el recorte de abajo. En la otra mano, si solamente estas poniendo un poco de texto o una imagen no necesitas recortarla y no tienes que fijar la altura tampoco. Entonces lo que he hecho con la función CSS es cuando fijas la altura, también fija los valores del recorte a (0,width,height,0) - la cual es la situación más común.
Como sea, en los casos en que deseas que los valores del recorte sean diferentes al ancho "widht" y altura "height" debe de utilizar la propiedad other y mandar tus propias 'clip:rect()' CSS. Cuando hagas esto escribirá tus CSS recortadas en lugar de hacer sus mismas basadas en el ancho y la altura.
También puedes hacer la capa relativamente posicionada con mandar nulo "null" para los dos valores izquierdos y derecho. En realidad cualquiera de los valores que no desees nada mas manda el valor nulo "null" para este y no los escribirá. Y con mandar un ID de COMENZAR "START" O TERMINAR "END" este escribe el apropiado tag STYLE para comenzar y terminar la sintaxis del CSS.
Ejemplos:
// return "#mylayer {position:absolute; left:50px; top:100px;}"
css('mylayer',50,100)
// return "#mylayer {position:relative; width:200px; background-color:#ff0000; layer-background-color:#ff0000;}"
css('mylayer',null,null,200,null,'#ff0000')
// return "#mylayer {position:absolute; left:50px; top:100px; width:200px; height:200px; clip:rect(0px 200px 200px 0px);}"
css('mylayer',50,100,200,200)
Hay dos opciones en esta función:
css('START') // returns "<style type="text/css">"
css('END') // returns "</style>"
Aquí hay un ejemplo de como utilizar la función css() para escribir una capa:
var str = css('START')+
css('mylayerDiv',50,100)+
css('END')
document.write(str)
Nada mas tienes que fijar una tira conteniendo todas la CSS necesitadas, y luego document write al browser. Es recomendado que nada mas escribas un grupo de CSS. Si tratas de hacer dos de los escritos arriba este
desconectara a Netscape 4.0 y 4.1. Si es absolutamente necesario puedes separar cada css escritura dentro de separados tags <script>
writeCSS(str,showAlert)
La función escribirCSS() (también incluida en css.js) solamente hace esto un poco menos que un problema. Él str parámetro es la tira de CSS que deseas escribir en la página. EscribirCSS() automáticamente agregará los valores css('START') y css('END') en el frente y al final de la tira y escribirá de tira resultante en la página:
writeCSS (
css('mylayerDiv',50,100)
)
escribirCSS() también tiene la opción showAlert para demostrar una advertencia de la tira de CSS siendo escrita en la página. Esta opción es solamente para propósitos de debugging :
writeCSS (
css('mylayer1Div',50,100)+ // must add css() calls together
css('mylayer2Div',50,100)+
css('mylayer3Div',50,100)
,1) // send true (or 1) to display a dialog
Así que la combinación de estas dos funciones es realmente muy buena si planeas de hacer esto muchas veces. Estaré utilizando bastante estas funciones. Aquí esta el último machote de una capa basada en la función CSS:
<html>
<head>
<title>The Dynamic Duo - Generated Layers Demo [CSS Function]</title>
<script language="JavaScript" src="../dynapi/css.js"></script>
<script language="JavaScript">
<!--
writeCSS(
css('mylayerDiv',50,70,100,20,'yellow')
)
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="mylayerDiv">my layer</div>
</body>
</html>
Ejemplo: generate2-cssfunction.html [fuente]
Ahora que tenemos una buena forma para generar capas, podemos comenzar a ver la razón general de hacer esto. Con generar capas de esta manera tenemos una buena forma de substituir números estáticos por números variables en tus CSS y comenzar a ver la verdadera carnita de las páginas dinámicamente generadas utilizando DHTML.
Ejemplo:
var x = 20+15/5
var y = 100+50/5
writeCSS(
css('mylayer',x,y)
)
Esta misma tactica será utilizada extensivamente en próxima lecciones.
Con hacer los loops puedes utilizar esta técnica para generar cualquier número de capas de cualquier forma que desees. Puedes generar docenas de capas en posiciones al azar, o crear arenas de capas. El siguiente ejemplo muestra el último. Estos son sencillos, estoy bien seguro de que podrás seguir a lo largo con la fuente de código.
Ejemplo: generate3-multiple.html [fuente]
Ejemplo: The Smart Blocks Demo
| Casa | Próxima Lección: Utilizando Browser Ancho/Altura |