Accordion 01
Introducción
Hoy por hoy hay muchos ejemplos de efecto accordion para MooTools. Sin embargo esto no es impedimento para que yo intente realizar el mio y compartirlo. Hace poco leí una cita en microsiervos:
El que puede, lo hace.
El que no puede, se dedica a la enseñanza.
Ley de Mencken
(La Ley de Murphy, Arthur Bloch)
Al terminar de digerir este código deberias entender como implementar este Accordion en MooTools
Desde Cero ...
Vamos a arrancar desde cero, que es como yo estaba ayer.
Trabajamos con MooTools, framwork de JS y AJAX entre otras hierbas.
Entonces lo primero que tenemos que hacer es bajarnos el archivo .js, el cual podemos optimizar seleccionando sólo las funciones a utilizar y también especificando un grado de compresión. Personalmente, cuando trabajo en mi compu me bajo todo el código sin ningún tipo de compresión. En el servidor subo la version comprimida Packer Compression. Vamos a utilizar la versión 1.00 que con todos los módulos y comprimida pesa 32.5 kb
Estructura de nuestro Accordion
Definición de estructura - Layout
Aunque el título puede asustar, simplemente se refiere al código html que implementaremos para nuestro accordion. Básicamente necesitamos definir cada bloque del accordion y por cada uno tenemos el disparador con su ventana correspondiente.
La figura adjunta muestra el ejemplo final. La zona azul es nuestro disparador mientras que la zona rosada es la ventana que en su momento se despliega y se encoge.
Al definir estos elementos utilizamos (en este ejemplo) divs para la estructura a los que identificamos (ya veremos luego) por medio de clases css class=" ....
Utilizamos el id="miAcordeon" para el contenedor principal el cual en este caso solo funciona como una caja de contención, a cada disparador asignamos class="dspAcc" y para las ventanas utilizamos class="vtnAcc". Mostramos la estructura en cuestión:
<h4 class="dspAcc">Titlo 01</h2>
<div class="vtnAcc">
<p>Comentario de la ventana 01.</p>
</div>
<h4 class="dspAcc">Titlo 02</h2>
<div class="vtnAcc">
<p>Comentario de la ventana 02.</p>
<hr />
<p>Comentario de la ventana 02 luego de un salto de linea.</p>
</div>
<h4 class="dspAcc">Titlo 03</h2>
<div class="vtnAcc">
<p><p>Comentario de la ventana 03.</p></p>
</div>
</div>
Notemos que no hay diferencia entre cada disparador y cada ventana en los bloques de nuestro accordion. Si queremos agregar más bloques solo tenemos que identificar con los valores previamente definidos.
Js y MooTools. Una Papa !
Las estrellas de esta fiesta es la clase Fx.Accordion y la función $$ (); herramientas que simplifican de una manera elegante y eficiente lo que sin dudas sería un gran embrollo.
Primero veamos la clase FX.Accordion. Pueden acceder a la documentación oficial en este link. Al crear un objeto la clase necesita como mínimo dos parámetros necesarios y un tercero opcional con el cual podemos modificar la apariencia y comportamiento del accordion. También podemos disparar eventos.
Tanto ventanas como disparadores son arrays que contienen todos los elementos que conforman nuestro accordion. Una forma de definirlos es con código js elemento por elemento. Sin embargo y en nuestro caso vamos a utilizar la fantástica función $$ (). Nos permite seleccionar y extender elementos DOM. La doc acá.
A esta función le podemos dar parámetros tipo tags html como b, p, ul, li, identificadores id e identificadores de clases css que es el caso de nuestro ejemplo.
Generamos dos variables tipo array con los disparadores y las ventanas con las clases css dspAcc y vtnAcc respectivamente; previamente definidas en el código html explicado arriba.
var arrDsps = $$('.vtnAcc');
Estos arrays serán los parámetros para la creación de nuestro objeto accordion. A su vez podemos definir el tercer parámetro de opciones como se muestra el siguiente código.
var arrVtns = $$('.dspAcc');
var arrDsps = $$('.vtnAcc');
ac = new Fx.Accordion(
arrVtns,
arrDsps,
{
duration: 400,
unit: 'px',
wait: false,
fps: 40,
display:1,
fixedHeight: 200,
alwaysHide: false
}
);
});
Los primeros 4 datos son parámetros de la clase Fx.Base. Esta es clase padre de Fx.Accordion. Los ultimos tres datos si pertenecen a Fx.Accordion. Por el momento diremos que estos parámetros son opcionales y su comprensión no requiere demasiado esfuerzo. Con el tiempo haremos ejemplos aplicando el total potencial de estas clases.
El Accordion sonando
Finalmente agregamos un poco de formato mediante css.
background: #CDA;
}
#miAcordeon {
width: 300px;
background: #DDD;
border: 1px solid #888;
padding: 4px;
font-size: 10pt;
}
#miAcordeon h4 {
margin: 0;
padding: 1px 5px;
border: 1px solid #AAA;
background: #047;
color: #FFF;
cursor: move;
}
.vtnAcc {
border-left: 1px solid #AAA;
border-right: 1px solid #AAA;
background: #EEE url('fnd_11.jpg');
color: #004;
padding: 1px 5px;
}
Con esto damos por terminado, por ahora, esta simple implementación. El resultado final lo pueden apreciar desde este link. Dejo a continuación el par de archivos necesarios para poder ejecutar fácilmente estos scripts en sus computadoras. Descargar ?.
No puedo dejar de citar a aNieto como fuente inicial (casi casi total ...) de este documento.
Hasta la Próxima ...
Diana dice,
May 2, 2007 at 17:09
Hola, te felicito por el manual super bien explicado para que los que sabemos poco.. entendamos. Tengo una pregunta, tome como ejemplo tu código para hacer una página utilizando ajax de tal forma que cada palaba en el link me muestre diferente contenido sin refrescar. En uno de los link debe mostrar este pagina donde esta los links tipo acordion, el problema es que mientras le prueba a la pagina por si sola todo funciona muy bien, el momento que le cargo en la otra por la función de ajax no se abren las tablas, no funciona el javascript. He hecho algunas pruebas copiando solo el script en la pagina inicial donde hago la petición y tampoco funciona, te agradecería un mundo si me pudieras ayudar.
Gracias
RetroFOX dice,
May 2, 2007 at 20:41
Creo que tu problema radica, si no entendí mal, en que estas intentando componer un arreglo accordion en una página html que la estas llamando con AJAX.
Es natural que no te funcione. Voy a tratar de ser sintético y claro al mismo tiempo:
[1] Para que funcione el accordion lo primero que hace el browser es cargar todo el contenido html de la página antes de ejecutar cualquier rutina JS. Acordate de Window.onDomReady.
[2] Cuando la página se cargó MooTools inspecciona nodo a nodo todos los elementos de la página buscando en este caso $$(’.dspAcc’) y var arrDsps = $$(’.vtnAcc’);.
[3]MooTools hace todo lo demás solito. Se encarga de armar las animaciones, los eventos, etc para que el script se comporte como un accordion.
Cuando vos cargas un nuevo contenido html a través de AJAX, no estas ejecutando el paso 2; o sea, no estas nuevamente inspeccionando la página para generar el script. En definitiva, no estas ejecutando javascript, porque este sólo se ejecuta cuando sucede Window.onDomReady; o sea, cuando se cargo por primera vez todo el contenido DOM de nuestra página primera.
Para poder solucionar esto, podrías llamar una vez cargada la página con ajax la rutina que nuevamente inspeccione el codigo html y así regenerar el o los accordiones.
Saludos. Perdón por lo extenso.
colombia dice,
May 14, 2008 at 2:42
Bueno, parece que tienes un problemita ahi, seguro se te paso, abres h4 y cierras h2
RetroFOX dice,
May 14, 2008 at 7:43
Es verdad. Que tiempos aquellos … Gracias por el detalle.
Saludos.