1 .
¿Qué es el W3C DOM?
2 .
Prestos a modificar nuestros menús
3 .
Cómo funcionan los menús en DOM
3.1 .
Compatibilidad hacia atrás
Actualización del código de las barras de menús desplegables para poder
funcionar en navegadores que soporten el W3C DOM (Netscape 6 y Explorer 5).
Modificado para albergar los cambios en el Netscape 6.
¿Qué es el W3C DOM?
Vistas las numerosas incompatibilidades surgidas entre las visiones
del HTML dinámico de Netscape y Explorer, el consorcio W3 decidió crear
un modelo de objetos del documento (DOM) que permitiera que el DHTML fuera
compatible entre todos los navegadores.
Parece que dicho objetivo esta en vías de verse cumplido. Con la
reciente aparición de la primera versión preliminar del Netscape 6 se
ve confirmado que los dos navegadores mayoritarios van a soportar DOM.
Netscape, incluso, ha eliminado el soporte de su antiguo modelo de HTML
dinámico, por lo que podemos estar seguros que la mayoría de las páginas
DHTML se actualizarán a DOM a lo largo de este año. Así pues, ¿por qué
no hacer nosotros lo mismo?
Prestos a modificar nuestros menús
Si disponéis de Explorer 5 o Netscape 6, podéis ver como
nuestro ejemplo
funciona en dichos navegadores. Si miráis el código puede que os sorprenda
los cortito que es. Vamos a estudiar a partir de ahora qué modificaciones
han sido necesarias para adaptarlo. Para seguir este artículo es
más que recomendable que hayáis leído y entendido la
entrega anterior
de nuestra saga de menús desplegables.
Como usuarios la única novedad es que deberemos indicar la
anchura de los menús al inicializarlos. Será el cuarto parámetro
del constructor:
function inicializar() {
...
menu[0] = new Menu("menu0", 20, 5, 100);
menu[1] = new Menu("menu1", 20, 93, 120);
menu[2] = new Menu("menu2", 20, 250, 310);
}
Sin embargo, esta necesidad se debe principalmente a un bug del
Netscape 6 PR1, que no parece soportar la anchura automática. Debido a ello
es posible que eliminemos esta restricción en el futuro.
Cómo funcionan los menús en DOM
Lo primero que debemos hacer es adaptar nuestro detector de navegadores
para que soporte los nuevos navegadores:
Objeto DetectorNavegador
function DetectorNavegador() {
this.NS4 = document.layers;
this.IE4 = document.all;
this.DOM = document.getElementById;
this.DHTML = this.NS4 || this.IE4 || this.DOM;
}
var soporta = new DetectorNavegador();
La única novedad es la inclusión de la propiedad this.DOM,
que indica si el navegador soporta este estándar. Lo averiguamos preguntando
por la existencia del método document.getElementsById,
propia del DOM.
El grueso de nuestras modificaciones estarán, por tanto, en el objeto
Menu. Comenzaremos viendo el nuevo constructor:
function Menu(capaID, top, left) {
this.activar = activarMenu;
this.mostrar = mostrarMenu;
this.ocultar = ocultarMenu;
this.cambiarPosicion = cambiarPosicionMenu;
if (soporta.DOM) {
this.domRef = document.getElementById(capaID);
this.domRef.style.width = width;
this.domRef.style.display = "none";
this.cambiarPosicion(top, left);
}
}
La primera novedad es que la obtención de una referencia, que llamamos
domRef, al nodo correspondiente a nuestro menú.
DOM modeliza toda nuestra página HTML como un gigantesco árbol, siendo
cada etiqueta un nodo del mismo. Por medio del método
document.getElementsById obtenemos el nodo cuyo
atributo id sea idéntico al dado como parámetro.
Una vez obtenida la referencia al nodo correspondiente a la etiqueta
DIV que contiene al menú, modificamos su anchura
por medio de la línea this.domRef.style.width = width;.
¡Y funciona en ambos navegadores! Siglos hacía que una cosa así se podía hacer
igual tanto en Explorer como en Netscape. Dejad que disfrute del momento y
ahora continúo... Ya.
Hay que indicar que por medio del atributo style
se pueden modificar todas las propiedades de las que dispone una etiqueta por
medio de las hojas de estilo. En la siguiente línea modificamos las propiedad
display, que es nueva y fue definida en el
estándar CSS2. Debemos indicar que no queremos que el elemento se visualice
de ninguna manera. Si no lo hacemos así seguiríamos sin ver el menú, puesto
que dijimos en la hoja de estilos que estuviera oculto
(visibility: hidden), pero podríamos pulsar
sobre los enlaces, aún cuando éstos no se vieran.
Finalmente llamamos al método que cambia de posición
el menú y que ahora tiene este aspecto:
function cambiarPosicionMenu(top, left) {
this.domRef.style.top = top;
this.domRef.style.left = left;
}
Como véis, el sistema es muy parecido a lo realizado anteriormente.
Los métodos para mostrar y ocultar un menú son, a su vez, muy similares:
function mostrarMenu() {
this.domRef.style.visibility = "visible";
this.domRef.style.display = "block";
}
function ocultarMenu() {
this.domRef.style.visibility = "hidden";
}
La mayor diferencia con respecto a la anterior versión es que
tendremos que modificar tanto visibility como
display. En Netscape 6, sin embargo, al poner
la visibilidad como oculta, se produce el mismo efecto que poner
display a none
en versiones preliminares del mismo. Y si añadimos esa línea, los enlaces
dejarán de funcionar, por lo que no la ponemos.
Compatibilidad hacia atrás
Por supuesto, dado que podemos hacer menús tanto para DOM como
para los navegadores de versión 4, es posible realizar una versión
que funcione en todos ellos. No vamos a entrar en cómo realizarla, ya
que principalmente no es más que un montón de if
comprobando el navegador por todos lados, pero os dejo
un nuevo ejemplo de
cómo se hace.
Artículos
