DHTML : Librerías : Menús desplegablesParte III: Opciones avanzadas de la librería menu.jsEn los capítulos anteriores describimos la forma de implementar menús desplegables con DHTML dinámico, utilizando la librería menu.js. Ahora vamos a profundizar en algunos aspectos avanzados que permiten sacar el máximo patido a las funcionalidades contenidas en menu.js. Si todavía no has leido la primera y segunda parte de esta explicación, te recomendamos que lo hagas:
Te recordamos que la definición de los menús (función onLoad) debe realizarse entre las etiquetas <head> y </head>. Además, para que los menús funcionen correctamente con la versión 5 del navegador Microsoft Internet Explorer, es necesario añadir entre las etiquetas <html> y </html> el siguiente código: <script language="javascript1.2"> 1. Creación de prototipos de estilosEn el capítulo 2 de esta explicación (Creación de submenús y adaptación de su aspecto) se describe cómo modificar el aspecto de los menús. Cuando dentro de un sitio se utilizan diferentes menús desplegables, el método descrito requiere muchas líneas de código, puesto que hay que repetir cada asignación de estilo para cada menú. La librería menu.js define un mecanismo de creación de prototipos que nos permite asignar un conjunto de estilos por defecto para la creación de los diferentes menús del site. Veamos un ejemplo: <script language="JavaScript1.2">
Como se puede observar, la creación del prototipo se basa en la asignación del objeto menú cuyos estilos se quieren utilizar como estilos por defecto a la propiedad prototypeStyles. Veamos como quedan nuestros menús: Menu A (toma
los estilos del prototipo) 2. Diferentes formas de mostrar los menúsLos menús creados utilizando esta librería son objetos basados en CSS (Cascade Style Sheets, Hojas de Estilo en Cascada). Por ello, pueden mostrarse y ocultarse utilizando la propiedad visibilty. Para simplificar este mecanismo, existen dos métodos (showMenu() y hideMenu()), que pueden utilizarse para mostrar y ocultar los menús. La función showMenu() recibe como argumento el objeto menú que se desea visualizar. Por defecto, el menú se muestra en la posición donde se encuentre el puntero del ratón. Esta configuración puede modificarse pasándole a la función showMenu() la coordenada X de la posición horizontal donde queremos que aparezca el menú. La coordenada para la posición vertical será la de la posición del puntero del ratón: <a href="javascript://" Para ver el resultado de mostrar el menú de la forma anterior, sigue el siguiente enlace: Menú A (a 10 pixels del borde izquierdo) En el ejemplo anterior hemos utilizado el evento onClick para capturar la pulsación sobre el enlace y lanzar la visualización del menú. Podemos utilizar el evento onMouseOver para crear menús con un comportamiento más propio de una página web. De este modo, conseguiremos que el menú se muestre cuando el puntero del ratón pase sobre el enlace: <a href="javascript://" El resultado se puede ver en este ejemplo: Pueden utilizarse otros tipos de eventos, como los nuevos eventos de JavaScript 1.2 (DblClick, DragDrop, KeyDown, KeyPress, KeyUp, MouseDown, MouseMove, MouseOut, MouseUp, Move o Resize). En cuanto a la ocultación de los menús, no es necesario preocuparse de realizarla. La librería menu.js establece el método hideMenu() para ocultar los menús y lo lanza cuando el usuario mueve el puntero del ratón fuera de la superficie del menú (utilizando el envento onMouseOut). También se utiliza el evento onMouseUp para invocar hideMenu() cuando se pulsa el botón derecho del ratón fuera del menú. Se puede cambiar este comportamiento creando nuevos gestores de evento para estos eventos. 3. Compatibilidad con los navegadoresLos navegadores de Netscape y de Microsoft soportan diferentes Modelos de Objetos del Documento (DOMs) (ver el capítulo El Modelo de Objetos del Documento de nuestra sección de JavaScript Avanzado). La librería menu.js lo tiene en cuenta. Para saber qué navegador está utilizando el usuario no se recurre a las propiedades del objeto navigator (appName y appVersion). Se utiliza en cambio la detección de objetos, basado en el hecho de que si un objeto existe al evaluarlo devuelve verdadero, y falso en caso contrario. De este modo, para saber si hay que usar el objeto layers (propio de Netscape) o el objeto all (propio de Microsoft) se usa: if (document.layers) {
NOTA:
|
{ Menús desplegables }
|