Sigueme por RSS! RSS

Sencillo acordeón con JQuery


Este interesante acordeón hecho con JQuery es ideal para cuando necesitamos armar un menú en nuestro sitio, a continuación los pasos para aplicarlo:

1.- incluimos el estilo y las librerías necesarias (antes de </head>):
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"/> 

2.- seguidamente hacemos el llamado a la función accordion() con jQuery:
<script>
   // ejecutara la función cuando la página termine de cargar
  $(document).ready(function() {
      $("#idacordeon").accordion();// iniciamos el acordeon
  });
  </script>

3.- en el cuerpo de la página armamos el menú:
Clic aquí para mostrar u ocultar la lista
<div id="idacordeon" style="font-size:62.5%;">
    <h3><a href="#">Item 1</a></h3>
    <div>
        <p>contenido ..</p>
    </div>
    <h3><a href="#">Item 2</a></h3>
    <div>
        <p>contenido ..</p>
    </div>
    <h3><a href="#">Item 3</a></h3>
    <div>
        <p>Sub-menu ..</p>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </div>
    <h3><a href="#">Item 4</a></h3>
    <div>
        <p>Contenido ..</p>
    </div>
</div>

Así de sencillo..


Opciones principales:
(clic para mostrar/ocultar)
disabled
- Deshabilitando el acordeon: con una sola linea podemos conseguirlo.
$( "#idacordeon" ).accordion({ disabled: true });

Le dará el efecto de menú deshabilitado (opacidad baja), pero lo sigue mostrando.

active
- Desplegando un item por defecto: podemos indicar que item aparecerá desplegado por defecto
$( "#idacordeon" ).accordion({ active: 3 }); // activamos el item 4

Hay que tomar en consideración que cada uno tiene un index y que el primero parte de cero, lo que significa, que la línea anterior desplegará por default al item 4..

animated
-por defecto usa el efecto slide, requiere la extensión UI Effects Core.
$("#idacordeon").accordion({ animated: 'bounceslide' });

no autoHeight
- controla el alto de los items, su valor por defecto es true, si lo seteamos a false evitara que se aplique un valor height similar para todos los items del acordeón.
$("#idacordeon").accordion({ autoHeight: false });

fillSpace
- si su valor es true, establece que el ancho de cada item debe ser igual al primero y de albergar contenido que supere la altura de ese, agregara un scrolbar vertical a los items que lo requieran.
$("#idacordeon").accordion({ fillSpace: true });

collapsible
- esta opción permite indicar que deseamos que los puedan expandirse o contraerse con un solo click, por defecto es false.
$("#idacordeon").accordion({ collapsible: true });

icons
- podemos indicar que iconos se mostraran para cuando los items están contraídos o cuando están expandidos.
$("#idacordeon").accordion({ 
  icons: { 
     'header': 'ui-icon-plus', /* icono item contraido */
     'headerSelected': 'ui-icon-minus' /* icono item expandido */
  } 
});

Podemos asignar cualquiera de los iconos que aparecen acá.

event
- permite establecer que evento permitirá la navegación entre items.
$("#idacordeon").accordion({ event: "mouseover" });

mousover permite que el contenido de los items se muestren al pasar el mouse sobre ellos.


Eventos:

create
- se dispara cuando se crea el acordeón, podemos hacer uso de alguna método anónimo para que se ejecute algún proceso..
$("#idacordeon").accordion({ 
   create: function(event, ui) { alert('bienvenido a cassianet!'); }
});

change
- este se dispara al cambiar entre items.
$("#idacordeon").accordion({ 
   change: function(event, ui) { alert('Ha habido un cambio!'); }
});

changestart
- este evento se dispara antes de que el acordeón cambie de items.
$("#idacordeon").accordion({ 
   change: function(event, ui) { alert('hacemos un cambio ..'); }
});


Referencia:
jquery.com

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.