MooTools - Acordeón

Accordion es el complemento más popular que proporciona MooTools. Ayuda a ocultar y revelar los datos. Discutamos más sobre esto.

Creando nuevo acordeón

Los elementos básicos que requiere un acordeón son pares de conmutadores y su contenido. Creemos pares de encabezados y contenidos del html.

<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>

Eche un vistazo a la siguiente sintaxis para comprender cómo construir un acordeón basado en la estructura HTML anterior.

Sintaxis

var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);

Ejemplo

Tomemos un ejemplo que define la funcionalidad básica de Accordion. Eche un vistazo al siguiente código.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <h3 class = "togglers">Toggle 1</h3>
      <p class = "elements">Here is the content of toggle 1</p>
      <h3 class = "togglers">Toggle 2</h3>
      <p class = "elements">Here is the content of toggle 2</p>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

Recibirá el siguiente resultado:

Salida

Opciones de acordeón

El acordeón ofrece características extraordinarias. Estas funciones ayudan a ajustar las opciones para ofrecer resultados personalizados.

monitor

Esta opción determina qué elemento se muestra al cargar la página. El valor predeterminado es 0, por lo que se muestra el primer elemento. Para establecer otro elemento, simplemente ingrese otro número entero que corresponda con su índice. A diferencia de "mostrar", la pantalla hará que el elemento se abra.

Syntax

var AccordionObject = new Accordion(toggles, content {
   display: 0 //default is 0
});

show

Al igual que "mostrar", mostrar determina qué elemento se abrirá cuando se cargue la página, pero en lugar de una transición, "mostrar" hará que el contenido se muestre al cargar sin ninguna transición.

Syntax

var AccordionObject = new Accordion(toggles, content {
   show: 0 //default is 0
});

altura

Cuando se establece en verdadero, se producirá un efecto de transición de altura al cambiar entre los elementos mostrados. Esta es la configuración de acordeón estándar que ve arriba.

Syntax

var AccordionObject = new Accordion(toggles, content {
   height: true //default is true
});

anchura

Esto funciona igual que el heightopción. Sin embargo, en lugar de cambiar la altura para mostrar el contenido, esto ayuda en la transición del ancho. Si usa "ancho" con una configuración estándar, como la que usamos anteriormente, entonces el espacio entre la alternancia del título permanecerá igual, según la altura del contenido. El div "contenido" luego pasará de izquierda a derecha para mostrarse en ese espacio.

Syntax

var AccordionObject = new Accordion(toggles, content {
   width: false //default is false
});

opacidad

Esta opción determina si mostrar o no un efecto de transición de opacidad cuando oculta o muestra algún contenido. Dado que estamos usando las opciones predeterminadas anteriores, puede ver el efecto allí.

Syntax

var AccordionObject = new Accordion(toggles, content {
   opacity: true //default is true
});

FixedHeight

Para establecer una altura fija, debe fijar un número entero (por ejemplo, podría poner 100 para el contenido de 100px de alto). Esto debe usarse con algún tipo de propiedad de desbordamiento de CSS si planea tener una altura fija menor que la altura natural del contenido.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedHeight: false //default is false
});

ancho fijo

Al igual que "FixedHeight" anterior, esto establecerá el ancho si le da a esta opción un número entero.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedWidth: false //default is false
});

escóndete siempre

Esta opción le permite agregar un control de alternancia a los títulos. Con esto establecido en verdadero, cuando hace clic en un título de contenido abierto, el elemento de contenido se cerrará automáticamente sin abrir nada más. Puede ver la ejecución en el siguiente ejemplo.

Syntax

var AccordionObject = new Accordion(toggles, content {
   alwaysHide: false //default is false
});

Eventos de acordeón

Estos eventos le permiten crear su funcionalidad para cada acción de Accordion.

onActive

Esto se ejecutará cuando abra un elemento. Pasará el elemento de control de alternancia y el elemento de contenido que se está abriendo y también los parámetros.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onActive: function(toggler, element) {
      toggler.highlight('#76C83D'); //green
      element.highlight('#76C83D');
   }
});

onBackground

Esto se ejecuta cuando un elemento comienza a esconderse y pasa a todos los demás elementos que se están cerrando, pero no se están abriendo.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onBackground: function(toggler, element) {
      toggler.highlight('#DC4F4D'); //red
      element.highlight('#DC4F4D');
   }
});

onComplete

Este es su evento onComplete estándar. Pasa una variable que contiene el elemento de contenido.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onComplete: function(one, two, three, four){
      one.highlight('#5D80C8'); //blue
      two.highlight('#5D80C8');
      three.highlight('#5D80C8');
      four.highlight('#5D80C8');
   }
});

Métodos de acordeón

Estos métodos le ayudan a crear y manipular secciones de acordeón.

addSection ()

Con este método, puede agregar una sección (un par de elementos de alternancia / contenido). Funciona como muchos de los otros métodos que hemos visto. Primero, consulte el objeto acordeón, use .addSection, luego puede llamar a la identificación del título, la identificación del contenido y, finalmente, indicar en qué posición desea que aparezca el nuevo contenido (0 es el primer lugar).

Syntax

AccordionObject.addSection('togglersID', 'elementsID', 2);

Note- Cuando agrega una sección como esta, aunque aparecerá en el lugar del índice 2, el índice real será +1 el último índice. Así que si usted tiene 5 artículos en su conjunto (0-4) y se añade un 6 ^º , su índice sería 5, independientemente de donde se agrega con .addSection ();

monitor()

Esto le permite abrir un elemento dado. Puede seleccionar el elemento por su índice (por lo tanto, si ha agregado un par de elementos y desea mostrarlo, aquí tendrá un índice diferente al que usaría anteriormente.

Syntax

AccordionObject.display(5); //would display the newly added element

Example

El siguiente ejemplo explica la función Accordion con algunos efectos. Eche un vistazo al siguiente código.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            color: #222;
            margin: 0;
            padding: 2px 5px;
            background: #EC7063;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
         }
         
         .ind {
            background: #2E86C1;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 20px;
            color: aliceblue;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            
            var AccordionObject = new Fx.Accordion(toggles, content, {
               show: 0,
               height : true,
               width : false,
               opacity: true,
               fixedHeight: false,
               fixedWidth: false,
               alwaysHide: true,
               
               onActive: function(toggler, element) {
                  toggler.highlight('#DC7633'); //green
                  element.highlight('#DC7633');
                  $('active').highlight('#DC7633');
               },
               
               onBackground: function(toggler, element) {
                  toggler.highlight('#AED6F1'); //red
                  element.highlight('#AED6F1');
                  $('background').highlight('#F4D03F');
               }
            });
            $('display_section').addEvent('click', function(){
               AccordionObject.display(4);
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "active" class = "ind">onActive</div>
      <div id = "background" class = "ind">onBackground</div>
      
      <div id = "accordion_wrap">
         <p class = "togglers">Toggle 1: click here</p>
         <p class = "elements">Here is the content of toggle 1 Here is the content of
            toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
            is the content of toggle 1 Here is the content of toggle 1 Here is the content
            of toggle 1 Here is the content of toggle 1</p>
         <p class = "togglers">Toggle 2: click here</p>
         <p class = "elements">Here is the content of toggle 2</p>
         <p class = "togglers">Toggle 3: click here</p>
         <p class = "elements">Here is the content of toggle 3</p>
         <p class = "togglers">Toggle 4: click here</p>
         <p class = "elements">Here is the content of toggle 4</p>
      </div>
      
      <p>
         100
         <button id = "display_section" class = "btn btn-primary">
            display section
         </button>
      </p>
      
   </body>
</html>

Output

Haga clic en cada sección de Alternar, luego encontrará los datos ocultos y los indicadores de eventos para cada acción.

↰ Previous page Next page ↱