Objeto MenuList

Revision Esta soportda por el MouseOver´s para abrir el menú siguiente - con solo fijar la propiedad overOpen. Todavía necesita un poco d trabajo, como algunos sistemas para hacer cerrar el menú cuando el documento ha sido clicleado afuera del MenuList.

El objeto MenuList crea un menú en forma de cascada utilizando el objeto Lista.

Este es un objeto repetitivo, una lista se enlaza a otra y así va, enlazándose. No hay límite de cuantas MenuListas puedes tener acomodados, y es bastante fácil de hacerlas. El objeto Lista provee todos la selección de artículos, rollover y controla eventos, el objeto MenuLista simplemente hace una repetición y enlaza las listas juntas con solo desaparecerlas y aparecerlas cuando son cliqueadas.

Creando una MenuLista

Debes de incluir dynlayer.js,list.js, and menulist.js:

<script language="JavaScript" src="dynlayer.js"></script>
<script language="JavaScript" src="list.js"></script>
<script language="JavaScript" src="menulist.js"></script>

Hay actualmente solo dos tipos de MenuListas, el primer menú en la jerarquía es un tipo (menú-principal), todos los otros MenuListas adentro de este son el otro (sub-menu). Para crear ese inicial MenuLista tienes que utilizar el siguiente comando:

objectName = new MenuList(x,y,width,itemH)

En el objeto Lista solamente, la propiedad itemH (las alturas de los artículos) es opcional, como sea para crear un objeto MenuLista con esa opción es un poco dificultoso. Así que he hecho esto obligatorio.

Usualmente querrás asignar una imagen a la lista, este reflejara una imagen en forma de fecha que identifica a un artículo particular para contener en otra lista:

objectName.list.setImage('list-img0.gif','list-img1.gif',12,18)

No tienes que asignar el artículo manualmente, la propiedad hasImage lo hace. Esto es hecho automáticamente cuando agregas un sub-menu.

Así de esta forma continua agregando artículos a la lista:

objectName.list.add(value,text)

Pienso que usualmente quieres tener un espacio que no se divida en el texto, entonces este usualmente aparecerá así:

objectName.list.add('myvalue','&nbsp;My Item Text')

Entonces tienes que hacer lo usual crear() "build(), escribir DIV "writeDIV", activar() secuencia " activate() sequence".

Haciendo Sub-Menus

Para agregar a sub-menu al MenuList, debes de utilizar un constructor alternativo:

mysubmenu = new MenuList(parentMenu, parentItemIndex)

parentMenu Se refiere a cual objeto MenuLista esté sub-menu va a ser pegado.

parentItemIndex Es el índice del articulo el cual mostrará este menú. Los Sub-menus deben de ser definidos antes que creas un menú principal.

Una vez que el sub-menu ha sido definido, puedes agregar artículos a su objeto list también. Como sea no tienes que llamar a un sub-menu el método build() o activado(), porque esto es automáticamente cuidado cuando build() y activate() estan en el menú principal.

Ejemplo:

mymenu = new MenuList(50,70,150,20)
mymenu.list.setImage('list-img0.gif','list-img1.gif',12,18)

mymenu.list.add(0,'&nbsp;item 0')
mymenu.list.add(1,'&nbsp;item 1')
mymenu.list.add(2,'&nbsp;item 2')

mysubmenu = new MenuList(mymenu,0)
mysubmenu.list.add(0,'&nbsp;item 0')
mysubmenu.list.add(1,'&nbsp;item 1')
mysubmenu.list.add(2,'&nbsp;item 2')

mymenu.build()
// escribe mymenu.css, mymenu.div, y llama mymenu.activate()

Por default, sub-menus heredan al ancho de sus padres, y una lista de letras y fijador de colores. Como sea si deseas; tú puedes asignar diferentes formularios para cada MenuLista en la jerarquía.

mymenu = new MenuList(50,70,150,20)
...
mysubmenu = new MenuList(mymenu,0)
mysubmenu.w = 200
...

Anidado Múltiple

El MenuLista soporta a un número ilimitado de capas anidadas, nada mas tienes que agregar más. Probablemente lo que quieres hacer es de salir con una conveniencia de nombres como (mymenu - mymenu0 - mymenu0_0 - mymenu0_0_0, y así continua).

mymenu = new MenuList(50,70,150,20)
mymenu.list.setImage('list-img0.gif','list-img1.gif',12,18)

mymenu.list.add(0,'&nbsp;item 0')
mymenu.list.add(1,'&nbsp;item 1')
mymenu.list.add(2,'&nbsp;item 2')

mymenu0 = new MenuList(mymenu,0)
mymenu0.list.add(0,'&nbsp;item 0')
mymenu0.list.add(1,'&nbsp;item 1')
mymenu0.list.add(2,'&nbsp;item 2')

  mymenu0_0 = new MenuList(mymenu0,0)
  mymenu0_0.list.add(0,'&nbsp;item 0')
  mymenu0_0.list.add(1,'&nbsp;item 1')
  mymenu0_0.list.add(2,'&nbsp;item 2')

mymenu1 = new MenuList(mymenu,1)
mymenu1.list.add(0,'&nbsp;item 0')
mymenu1.list.add(1,'&nbsp;item 1')
mymenu1.list.add(2,'&nbsp;item 2')

  mymenu1_2 = new MenuList(mymenu1,2)
  mymenu1_2.list.add(0,'&nbsp;item 0')
  mymenu1_2.list.add(1,'&nbsp;item 1')
  mymenu1_2.list.add(2,'&nbsp;item 2')

mymenu2 = new MenuList(mymenu,2)
mymenu2.list.add(0,'&nbsp;item 0')
mymenu2.list.add(1,'&nbsp;item 1')
mymenu2.list.add(2,'&nbsp;item 2')

// y así continua, ya tienes la idea.

mymenu.build()

Los nombres de los objetos son arbitrarios, hazlos lo que tú quieras siempre y cuando sepas que representan.

Propiedades y Métodos

Hay montones de cosas internas que probablemente nunca tendrás que tocar, pero estos son los que vale la pena de mencionar.:

Propiedades y métodos:

Hay varios cosas internas los cuales tal vez nunca tengas que tocar, pero estos son los que vale la pena mencionar:

Propiedades:

lyr (DynLayer)
un Dynlayer asociado con la capa mas-alto del MenuLista, toda funcionalidad del DynLayer puede ser disponible a la MenuLista por esta propiedad/objeto
list (List)
indica a la lista conteniendo un MenuLista, toda la funcionalidad de la Lista son disponibles a una MenuLista a través de este propiedad/objeto
w (integer)
ancho del MenuList
h (integer)
altura del MenuList
isChild (boolean)
si el MenuLista es un hijo "child" de otra MenuLista (verdadero significa que es un sub-menu)
list.items[x].hasChild (boolean)
this.items[x].child (MenuList)
indica al MenuLista que un artículo esta asociado con
this.parent (MenuList)
indica el MenuLista padre "parent", solo si es un sub-menu
childShown (integer)
el índice del sub-menu que esta siendo mostrado en el momento, retorna nulo y nada es mostrado
subOnSelect (boolean)
determina si un artículo el cual abre un sub-menu llamara al controlador de onSelect cuando es cliqueado. Esto es falso por default - cuando tu cliqueas en un "node" no llamara al controlador onSelect.
offsetX (integer)
contrapeso horizontal de los sub-menus, el default es 0
offsetY (integer)
contrapeso vertical de los sub-menus, el default es -1
zIndex (integer)
CSS zIndex mandado a la capa mas-alta en el MenuLista, nulo por default
visibility ('hidden','visible', or 'inherit')
CSS visibilidad de la layer mas-alta en el MenuList, 'heredada' por default
visible (boolean)
ya sea la entera MenuLista visible o no
overOpen(boolean)
fija en caso de que el MenuLista abrirá el child nenú con mover el ratón encima de ella

Métodos:

hide()
deberá de ser utilizado en lugar de lyr.hide() en orden de cerrar los sub-submenus
show()
deberá de ser utilizado en lugar de lyr.show() en orden de cerrar los sub-submenus
toggle()
toggles la visibilidad de la entera MenuLista

onSelect Controlador de Evento

Como en mi otra Lista - basada en objetos, el MenuLista incorpora su mismo onSelect controlador de eventos para "hacer cosas" cuando cliqueas en un artículo. Un MenuListRedirect es proveído como una vía de redirigir al browser cuando un artículo es seleccionado. Nota que la propiedad subOnSelect, por default artículos que abren los sub-menus no generan un evento onSelec, pero este podrá ser pasado por encima con esta propiedad.

Ejemplo de como utilizar onSelect:

mymenu.onSelect = MenuListRedirect

Ejemplo menulist1.html [fuente] para un simple ejemplo de MenuList.

Ejemplo menulist2.html [fuente] para un ejemplo de MenuLista con dos listas, escondidas por default con un esquema alternado de color.

Ejemplo menulist3.html [fuente] - utiliza el MenuListRedirect controlador para cambiar las paginas.

Fuente de Código

menulist.js

Tambien lee el correpondiente MenuBar Object el cual ha sido diseñado para controlar multiples MenuLists.

Casa Próxima Lección: MenuBar Object
copyright 1998 Dan Steinman