Este es un pequeño objeto audaz para hacer menús animados que colapsan para tu navegación. Este funciona muy bien en páginas basadas- en Capas (Layers), como también puede servir totalmente como el navegador para un sitio web basado- en Frames (Marcos). Es sumamente simple, y te deja bastantes cosas abiertas, como a lo largo de composición de los contenidos y operaciones. La única restricción es que no es indefinidamente acomodable (solamente puede tener un nivel de sub-blocks). Tal vez voy a construir otra versión con el soporte para esta, y también para cambiar una imagen automáticamente para las imágenes torcidas "twisty", como una flecha que se da vuelta abajo cuando abres un nodo).
Este objeto opcionalmente puede utilizar los Métodos Glide por su animación el cual lo hace sobresalir, y es probablemente la única forma que lo desearías.
CollapseMenu(x,y,width,numBlocks,name)
Ejemplo formado (setup):
collapse = new CollapseMenu(50,50,200,5) collapse.openStyle = 'glide' collapse.build() writeCSS( collapse.css ) // in init() collapse.activate()
La redacción de los div tags son un proceso manual en este objeto. Aquí es como tienes que fijar los div´s para 3 blocks:
<script language="JavaScript"> document.write(collapse.divStart) </script> <div id="CollapseMenu0Block0"> <div id="CollapseMenu0Block0Item"></div> <div id="CollapseMenu0Block0Content"> </div> <div id="CollapseMenu0Block1"> <div id="CollapseMenu0Block1Item"></div> <div id="CollapseMenu0Block1Content"> </div> <div id="CollapseMenu0Block2"> <div id="CollapseMenu0Block2Item"></div> <div id="CollapseMenu0Block2Content"> </div> <script language="JavaScript"> document.write(collapse.divEnd) </script>
Note algunas cosas:
Para abrir un sub-menu lo que usualmente tienes que hacer es de tener un enlace adentro de la capa "Item" que llama al CollapseMenu método toggle():
collapse.toggle(2) // open/close the 3rd block
Ese enlace servirá como el "nodo", este estará siempre visible, cualquier contenido en la capa "Content" será cubierto hasta que hagas clic en el enlace para hacer (toggle) que se abra. Entonces tus capas usualmente tendrán esto:
<script language="JavaScript"> document.write(collapse.divStart) </script> <div id="CollapseMenu0Block0"> <div id="CollapseMenu0Block0Item"><a href="javascript:collapse.toggle(0)">item 0</a></div> <div id="CollapseMenu0Block0Content"> mi contenido va aquí </div> <div id="CollapseMenu0Block1"> <div id="CollapseMenu0Block1Item"><a href="javascript:collapse.toggle(1)">item 1</a></div> <div id="CollapseMenu0Block1Content"> mi contenido va aquí </div> <div id="CollapseMenu0Block2"> <div id="CollapseMenu0Block2Item"><a href="javascript:collapse.toggle(2)">item 2</a></div> <div id="CollapseMenu0Block2Content"> mi contenido va aquí </div> <script language="JavaScript"> document.write(collapse.divEnd) </script>
Después que hayas fijado eso estar disponible de activar() el objeto y este abrirá los sub-menus como lo esperado.
En netscape si tu lista de contenidos en muy larga y esta pasará despues de la parte debajo de la pantalla. Netscape no registra el alto de las capas del documento así que el scroll bar default en Netscape no coincidirá con la altura de tu CollapseMenu. Como sea, puedes arreglar esto con manualmente fijando el alto del documento con el alto del CollapseMenu haciendo lo siguiente después de que tu objeto ha sido activado
if (is.ns) document.height = collapse.lyr.y + collapse.h
Eso toma la localización de arriba en él colapse y lo agrega a la altura del colapse ( el cual fue calculado automáticamente para ti ). Solamente puedes fijar la altura del documento una vez, así que no hay otra escogencia que fijarlo con la altura total del menú
Tienes tres escogencias
Puedes fijar esta opción en cualquier momento con cualquiera de :
collapse.openStyle = "glide" collapse.openStyle = "slide" collapse.openStyle = "move"
Ejemplo: collpasemenu1.html [fuente] - un ejemplo simple CollapseMenu
Example: collpasemenu2.html [fuente] - un CollapseMen hara enlaces en páginas de esta Guía CollapseMenu
| Nombre de Propiedades | Descripcion |
| nombre | Guarda los nombres utilizados en todas las capas |
| w | el ancho del menu (fijado manualmente en el contructor) |
| h | la latura del menu (encontrado automaticamente después de activar()) |
| numBlocks | numero de blocs, los mismo que mandaste en el constructor - esto es leido solamente , no puedes agregar nuevos blocs dynamicamente |
| openStyle | tipo de animación para abrir con |
| bgColor | color de fondo para todas la capas, no puede ser transparente porque veras todo el contenido adentro de todos los blocs |
| contentIndent | numero de pixels para hacer indent al contenido de capas |
| inc | repeticion aumentada en pixels (para slide) o grados (para glide) |
| speed | repeticion retrasada en milliseconds |
| active | valor bolean ya sea que el menu se encuentre alctulamente en movimiento (verdadero significa que se esta abriendo o cierrando, falso significa que esta sin movimiento) |
| itemTotal | altura total height de "Item" las capas |
| ContentTotal | altura total height del "Content"las capas |
| blocks[] | un array guardando la información para cada bloc |
| blocks[i].open | bolean ya sea que el bloc este abierto o no |
| blocks[i].itemHeight | altura del articulo por ese bloc |
| blocks[i].contentHeight | altura del contenido por ese bloc |
| blocks[i].h | itemHeight + contentHeight |
| Nombre Metodo | Descripcion |
| build() | Agrupa las css y las propiedades div para crear las capas necesitadas |
| activate() | Asigna todas las DynLayers y toma la información importante para que permita al objeto funcionar |
| toggle(i) | Abre el bloc si esta cerrado, lo cierra si esta abierto |
| open(i) | abre el bloc |
| close(i) | cierra el bloc |
| Nombre del DynLayer | Descripcion |
| lyr | La capa de la parte de arriba del CollapseMenu |
| blocks[i].lyr | capa para un bloc solo (contiene artículo y contiene capas) |
| blocks[i].itemlyr | capa del artículo (item layer) |
| blocks[i].contentlyr | contenido de la capa |
El Evento onToggle
Este es llamado inmediatamente después que un particular bloc ha sido toggles:
mycollapse.onToggle = new Function("alert('I\ve been toggled')")
Si funciona muy bien. La demostración de abajo muestra un ejemplo completo incluyendo una función que sincroniza la altura de Scroll con la altura del CollapseMenu:
// onToggle handler to sync the height of a Scroll with a CollapseMenu
function CollapseSynchScroll() {
var h = this.itemTotal
for (var i=0;i<this.numBlocks;i++) {
if (this.blocks[i].open) {
h += this.blocks[i].contentHeight
}
}
if (this.scroll.window.contentlyr.y<0 && h<this.scroll.window.screenlyr.h) {
this.scroll.window.contentlyr.moveTo(null,0)
}
this.scroll.activate(this.w,h,false)
}
Ejemplo: collpasemenu-scroll.html [fuente] - un CollapseMenu adentro de un scroll
| Casa | Próxima Lección: Objeto PushPanel |