La DOMLib utiliza la mayor cantidad de código compatible con el estándar DOM como sea posible, lo que la hace rápida y pequeña. Este documento explicará algunas de las bases de utilizar la DOMLib. También puede mirar el código de ejemplo para algo más de información acerca de cómo trabajar con la DOMLib.
Para probar los ejemplos, asegurese de que el enlace al archivo dhtmlapi.js
sea correcto (puede poner los ejemplos en la carpeta example/ del paquete que
compone la DOMLib, o bien crear una nueva carpeta para ello)
Crear capas es muy simple, todo lo que debemos hacer es crear una nueva instancia
del DomElement (para los conocedores de la DynAPI, esto es lo mismo
que crear un objeto DynLayer). Aquí hay un ejemplo de creación
de una nueva capa:
<html>
<head>
<script language="Javascript" src="../src/dhtmlapi.js"></script>
<script language="Javascript">
onload=function() {
myLayer=new DomElement('myLayer')
document.body.appendChild(myLayer.elm)
}
</script>
</head>
<body>
</body>
</html>
El único código importante es el ubicado en la función
onload (la función onload es la función
onload por defecto del navegador). Expliquemos el código, la primera
línea : myLayer=new DomElement('myLayer') se utiliza para
crear una nueva capa con myLayer como valor de la propiedad id
de la capa. Ahora podemos acceder a la funcionalidad de la capa mediante la
variable myLayer. La segunda línea es muy importante, esta
añade la capa al documento. Observe que se utiliza la codificación
estándar del DOM para agregar capas hijas.
Una cosa importante a recordar es que la capa actual es la propiedad .elm
de su DomElement, así que cuando añada su DomElement
al documento, deberá añadir el objeto DomElement.elm.
El ejemplo de arriba no es muy excitante de observar, lo cierto es que puede
cambiarse fácilmente mediante una hoja de estílos CSS normal y
corriente (para mayor información sobre las hojas de estilo, vea www.w3schools.com/css).
Cuando se crea un DomElement podemos especificar un segundo parámetro
que define la hoja de estilos a utilizar para ese elemento. Aquí hay
un ejemplo que crea una capa basada en una hoja de estilos:
<html>
<head>
<script language="Javascript" src="../src/dhtmlapi.js"></script>
<script language="Javascript">
onload=function() {
myLayer=new DomElement('myLayer','myStyle')
document.body.appendChild(myLayer.elm)
}
</script>
<style type="text/css">
.myStyle {
left:200px;
top:200px;
width:100px;
height:100px;
border:1px solid;
background-color: #c0c0c0;
position:absolute;
}
</style>
</head>
<body>
</body>
</html>
Los únicos cambios entre este ejemplo y el anterior, son el segundo
parámetro del DomElement de nombre myStyle.
Este nombre se corresponde con la hoja de estilos creada. El DomElement
se creará ahora utilizando esta hoja de estilosmyStyle y
se visualizará como una caja grís con un fino borde negro a su
alrededor.
La última cosa que explicaré en este tutorial es como crear capas hijas. De nuevo, esto es muy simple y solo requiere unas pocas lineas más de código. Primero, tomemos el ejemplo superior y ampliemoslo un poco:
<html>
<head>
<script language="Javascript" src="../src/dhtmlapi.js"></script>
<script language="Javascript">
onload=function() {
myLayer=new DomElement('myLayer','myStyle')
document.body.appendChild(myLayer.elm)
myChild=new DomElement('myChild','myChildStyle')
myLayer.appendChild(myChild)
}
</script>
<style type="text/css">
.myStyle {
left:200px;
top:200px;
width:100px;
height:100px;
border:1px solid;
background-color: #c0c0c0;
position:absolute;
}
.myChildStyle {
left:25px;
top:25px;
width:50px;
height:50px;
background-color: #b0b0b0;
border-left: 1px solid white;
border-top: 1px solid white;
border-right: 1px solid black;
border-bottom: 1px solid black;
position:absolute;
}
</style>
</head>
<body>
</body>
</html>
Sólo se han añadido dos líneas extra de código
y una nueva definición de estilo llamada myChildStyle, la
primera sentencia de código; myChild=new DomElement('myChild','myChildStyle')
se utiliza para crear una nueva capa denominada myChild utilizando
la hoja de estilos myChildStyle para definir su apariencia y ubicación.
La segunda línea myLayer.appendChild(myChild) asigna esta
capa hija a su capa padre mediante el método appenChild
del tipo de objeto DomElement, especificando la capa hija como parámetro.
Como puede ver, es muy simple crear capas y capas hijas. Una cosa a recordar
es que una hoja de estilos puede ser compartida entre capas, así que
cualquier capa puede utilizar la misma hoja de estilo para definir su apariencia.
Hay muchos más métodos disponibles para el DomElement
pero para ver una lista completa de dichos métodos, por favor vea la
referencia de Desarrolladores. Estos métodos de conveniencia no se requieren
para realizar manipulaciones de las capas, ya que puede utilizar las técnicas
estándares de movimiento de capas mediante la manipulación directa
de las propiedades .elm.style.left y.elm.style.top
o cualquier otra propiedad disponible en las hojas de estilo (background color,
display, width, height, etc).