Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (II Efectos)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 11

Visitas el mes pasado: 23

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools2 (VII)

La clase Fx.Accordion

imagen mootools

Introducción

La clase Fx.Accordion Se utiliza para crear un efecto concreto que es el llamado efecto acordeon. Supongamos que tenemos varios artículos que queremos mostrar en una página. Con el efecto acordeón mostramos sólo los títulos. Al pulsar sobre un título se abre el contenido del artículo debajo del título, quedando los demás títulos unos por encima, y otros por debajo del artículo. Al pulsar sobre otro artículo, se cierra el que teníamos abierto, abriendose el que hemos pulsado.

Para ver esto con más claridad, pondremos primero un ejemplo, para después ver cómo lo hemos hecho:


Fx.Accordion: el HTML

La distribución del contenido que queremos mostrar dentro del efecto acordeón es importante. Tenemos que hacer que haya dos clases de elementos que podamos seleccionar, una con los títulos, y otra con los contenidos de los artículos. Debemos poner también cada contenido debajo de su título, es decir en un orden normal.

Aquí a la derecha-abajo vemos un ejemplo del efecto acordeón. al pulsar sobre cualquiera de los títulos, se abre su contenido correspondiente, cerrándose el que había abierto.

PRIMERO

primer elemento de primero

segundo elemento de primero

tercer elemento de primero

cuarto elemento de primero

SEGUNDO

primer elemento de segundo

segundo elemento de segundo

tercer elemento de segundo

cuarto elemento de segundo

TERCERO

primer elemento de tercero

segundo elemento de tercero

tercer elemento de tercero

cuarto elemento de tercero

CUARTO

primer elemento de cuarto

segundo elemento de cuarto

tercer elemento de cuarto

cuarto elemento de cuarto

Veamos primero el contenido del HTML de los elementos que lo forman:

<div id="caja1">
  <h2>PRIMERO</h2>
  <div class="contenido">
    <p>primer elemento de primero</p>
    <p>segundo elemento de primero</p>
    <p>tercer elemento de primero</p>
    <p>cuarto elemento de primero</p>
  </div>
  <h2>SEGUNDO</h2>
  <div class="contenido">
    <p>primer elemento de segundo</p>
    <p>segundo elemento de segundo</p>
    <p>tercer elemento de segundo</p>
    <p>cuarto elemento de segundo</p>
  </div>
  <h2>TERCERO</h2>
  <div class="contenido">
    <p>primer elemento de tercero</p>
    <p>segundo elemento de tercero</p>
    <p>tercer elemento de tercero</p>
    <p>cuarto elemento de tercero</p>
  </div>
  <h2>CUARTO</h2>
  <div class="contenido">
    <p>primer elemento de cuarto</p>
    <p>segundo elemento de cuarto</p>
    <p>tercer elemento de cuarto</p>
    <p>cuarto elemento de cuarto</p>
  </div>
</div>


El contenido CSS

El contenido CSS también es importante, ya que tenemos que dar distinto estilo a los títulos y a los contenidos. De esta manera el usuario sabrá que se encuentra ante un efecto acordeón.

En nuestro ejemplo hemos puesto el siguiente código CSS:

#caja1 { width:35%; float: right; margin: 1em 3em 1em 1em; 
         border: 1px solid blue; }
#caja1 h2 { background-color: navy; color: yellow; margin: 2px; padding: 3px;
            font: bold 16px verdana; text-align: center; cursor: pointer; }
#caja1 p { font: normal 13px verdana; padding: 5px 15px; } 

Algunos trucos como poner distintos fondos para los títulos y para los contenidos pueden ayudar bastante para diferenciarlos. También hemos puesto un cursor:pointer en los títulos para el usuario sepa que tiene que pulsar ahí.


Código javascript

El código javascript-mootools para conseguir el efecto consiste simplemente en instanciar el objeto Fx.Accordion(). Al instanciarlo ponemos como primer argumento el "Element" que contiene los títulos; como segundo ponemos el "Element" de los contenidos, y un tercer argumento (opcional) donde podemos indicar las opciones del efecto. El código en nuestro ejemplo (dentro de la estructura "domready), es el siguiente:

acordeon=new Fx.Accordion($$("#caja1 h2"),$$(".contenido"),{
   duration: 1000,
   show: 0
   });

Sencillamente, instanciamos el objeto y le ponemos tres argumentos, el primero, los títulos, el segundo los contenidos, y el tercero las opciones. Respecto a las opciones que podemos poner las explicamos a continuación.


Opciones del objeto Fx.Accordion.

Podemos poner todas las opciones comunes a los objetos Fx, es decir las vistas para Fx.Morph, y además las siguientes opciones, que son específicas de Fx.Accordion.

Poniendo las opciones height:false y width:true podemos hacer un efecto acordeón que se abra de izquierda a derecha. En este caso la estructura de los elementos debe ser distinta, ya que tenemos que ponerlos todos en horizontal en la misma fila, ya sea pòniendo todos los elementos en la misma fila de una tabla, o con la propiedad CSS float:left.


Métodos

La clase Fx.Accordion() tiene los siguientes métodos. Estos debemos aplicarlos sobre un objeto de esta clase. Suponiendo que tenemos un objeto acordeon ya instanciado veamos qué métodos le podemos aplicar:

acordeon.removeSection()

Elimina de la página el contenido de una sección, (pero no su título). Por lo tanto se queda el título con una sección que no podemos abrir. La eliminación no es total, ya que permanece en el DOM y se puede recuperar. Como primer argumento se pasa el "id" del título de la sección que se quiere eliminar; y como segundo, el número de la sección que se abrirá en su lugar al aplicar el método.

acordeon.removeSection($("titulo2"),0)

acordeon.addSection()

El efecto contrario al anterior. Restablece el elemento eliminado. Para ello pasamos como primer argumento el "id" del título de la sección, y como segundo el "id" que tenía el contenido eliminado (recordemos que no lo hemos eliminado totalmente).

acordeon.addSection($("titulo2"),$("texto2"))

acordeon.display()

Abre una sección determinada, para lo cual se indica su número como argumento:

acordeon.display(2);

acordeon.detach()

anula el comportamiento de acordeón de todas las secciones, por lo que se anula el efecto acordeón.

acordeon.detach();





En la siguiente página vemos el efecto "move" que permite mover un elemento con referencia a otro.

La clase Fx.Move()



Manual de Mootools (II Efectos)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com