Efecto Acordeón con jQuery 1

Y bueno, como comentaba antes me llamo mucho la atención jQuery junto con Prototype, así que sigo explicando ciertos efectos que son muy útiles y sencillos de implementar, hoy explicare como hacer un acordeón de opciones con jQuery.

   Primero que nada debemos cargar la librería y cargar cada uno de los efectos a utilizar, y luego comenzamos a cargar los efectos que queramos, veamos las opciones que tenemos, primero un acordeón sencillo, veamos el html básico:

Titulo 1

el contenido 1

Titulo 2

el contenido 2

Titulo 3

el contenido 3

Y el script de jQuery sería:
jQuery('#mi_id').accordion();
  header: 'mi_encabezado'

Aquí pueden haber enlaces:


También puede ser un párrafo

Probando jQuery, esto es un párrafo
de unas 4 líneas para probar la
funcionalidad del efecto acordeón
utilizando esta librería.


¿Y porqué no imagenes?







   Con la opción "autoheight: false" elegimos si el acordeón se ajustara al tamaño del párrafo o "div" mas grande de forma automática o no, por ejemplo:
jQuery('#mi_id').accordion({
    header: 'mi_encabezado',
    autoheight: false 
});

Aquí pueden haber enlaces:


También puede ser un párrafo

Probando jQuery, esto es un párrafo
de unas 4 líneas para probar la
funcionalidad del efecto acordeón
utilizando esta librería.


¿Y porqué no imagenes?







   También tenemos con efecto hover:
jQuery('#mi_id').accordion({ 
    active: false, 
    header: 'mi_encabezado', 
    navigation: true, 
    event: 'mouseover', 
    fillSpace: true, 
    animated: 'easeslide' 
});

   O podemos utilizar el anterior pero agregándole una animación al llegar al final y un color para un mejor acabado:
jQuery('#mi_id').accordion({
    event: 'mouseover', 
    active: '.selected', 
    selectedClass: 'active', 
    animated: "bounceslide", 
    header: "mi_encabeza" 
}).bind("change.ui-accordion", function(event, ui) { 
    jQuery('
' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown
');

Color 1
Con color HTML.
Color 2
Con color hexadecimal.
Color 3
Hasta gradientes.
Parte 2





4 Comentarios

Escribir Comentario
Anónimo
AUTOR
1 de febrero de 2011, 16:04 delete

primeramente garcias por compartir este bonito efecto.
mi pregunta es la siguiente...
que librerias debo cargar antes para que me salga ese efecto.
lo probe y no me sale asi como a ti

Responder
avatar
1 de febrero de 2011, 16:24 delete

La librería la puedes encontrar en el API del efecto, de igual forma te dejo el enlace directo:

http://jquery.bassistance.de/accordion/jquery.accordion.js

La forma de aplicarla es la misma, como si se tratase de cualquier otro efecto, solo que esta en otra librería, un ejemplo de como aplicarla esta en la Parte 2... Saludos!

Responder
avatar
5 de marzo de 2011, 13:32 delete

hola amigo, mi duda donde debo pegar los codigos en mi blog para tener un menu asi?

antes del /body o antes del /head o en un gadget???
ayuda por favor.
me gusto este que tiene las imagenes pero no se como hacerlo (donde colodar el codigo)

Responder
avatar
6 de marzo de 2011, 19:02 delete

Hola amigo, bueno, el codigo, script, la librería, todo eso debes colocarlo dentro de las cabaseras (entre las etiquetas head), y el código HTML debe ir dentro del cuperpo (body) o donde quieras colocarlo...

De cualquier forma visita la entrada "Prototype y jQuery" para que veas como se utiliza la declaración de las variables para le efecto.

También te invito a ver la Segunda Parte de los efectos estilo acordeón... Saludos!

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon