domingo, 2 de noviembre de 2008

e24TabMenu – Menú desplegable AJAX

| www.blogonautia.tk ©2007-2008

extraido de: fuente<----

Introducción

e24TabMenu es un plugin de scriptaculous que permite hacer un tab menú que al clicar sobre sus pestañas se expanden hacia abajo.


Demos



¿Cómo utilizarlo?


Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro del header del código HTML de la página. Incluya e24TabMenu después de ambos:


<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24tabmenu.js'></script>


Ahora escriba el código HTML necesario para definir el menú. Necesitaremos una capa contenedora (“menu” en el ejemplo) y dentro de la capa contenedora pondremos una capa para cada elemento del menú donde podremos añadir el contenido correspondiente. A continuación añada un enlace (etiqueta “A”) para cada pestaña del menú, el atributo “rel” debe tener como valor e24menuitem[id_de_la_capa_del_contenido] donde id_de_la_capa_del_contenido es el nombre de la capa que contiene el contenido del elemento de menú a desplegar (en el ejemplo “ítem_3d”, “ítem_gall”, “ítem_menu”, “ítem_efec”). Además, después de los enlaces podemos añadir contenido que aparecerá cuando el menú no tenga ninguna pestaña desplegada.


<div id="menu" ><!---menu container--> 
<div id="item_3d" class="menutarget">
Contenido
</div>

<div id="item_gall" class="menutarget">
Contenido
</div>

<div id="item_menu" class="menutarget">
Contenido
</div>

<div id="item_efec" class="menutarget">
Contenido
</div>

<!---tabs del menu-->
<a id="3d" href="#3d" rel="e24menuitem[item_3d]"><img src="img/3d.gif" alt="Efectos 3D" /></a>
<a id="gall" href="#galerias" rel="e24menuitem[item_gall]"><img src="img/galerias.gif" alt="Galeria de fotos AJAX" /></a>
<a id="menus" href="#menus" rel="e24menuitem[item_menu]" ><img src="img/menus.gif" alt="Efectos de Menus" /></a>
<a id="efec" href="#efectos" rel="e24menuitem[item_efec]"><img src="img/efectos.gif" alt="Otros efectos ajax" /></a>
<!---tabs del menu-->

<div id="maincontent">
Contenido principal
</div><!--texto-->
</div><!--menu container-->


Ahora veremos el código javascript necesario para el funcionamiento del menú, donde pasaremos como primer parámetro el id de la capa contenedora del menú “menu” y un array de parámetros para el efecto.


oe24TabMenu = new e24TabMenu( 'menu', { duration: 1.0, transition: Effect.Transitions.sinoidal } );


Todas las Opciones



  • duration: Un valor decimal que representa el tiempo en segundos que durará el despliegue de la pestaña del menú. Valor por defecto: 1.0

  • transition: Función que modifica cada punto de la animación: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker

  • callback: función que se llamará cuando se complete la animación, útil para concatenar animaciones.


Métodos



  • toggleMenu: Despliega o expande una pestaña de menú según sea el caso. Requiere como parámetro el objeto referente al enlace correspondiente al elemento de menú en cuestión.
    oe24TabMenu.toggleMenu($('3d'));



Errores conocidos y cosas por hacer



  • Permitir el menú en varias direcciones, de abajo hacia arriba, izquierda a derecha, derecha a izquierda.


Descargar


e24TabMenu 0.8 beta (176 KB)

0 @comentarios :

MUCHAS GRACIAS POR VISITAR MI BLOG, ACEPTO TUS CRITICAS Y COMENTARIOS QUE PUEDES EXPRESAR AQUI:

 

©2007-2015 - www.blogonautia.blogspot.com.ar • Todos los Derechos Reservados | Los contenidos son propiedad de sus respectivos autores

Suscribete y recibe lo ultimo de BLOGONAUTIA en tu correo