MooTools - Acordeão

Accordion é o plugin mais popular que a MooTools oferece. Ajuda a ocultar e revelar os dados. Deixe-nos discutir mais sobre isso.

Criando novo acordeão

Os elementos básicos que um acordeão requer são pares de alternadores e seus conteúdos. Vamos criar pares de títulos e conteúdos do 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>

Dê uma olhada na sintaxe a seguir para entender como construir um acordeão com base na estrutura HTML acima.

Sintaxe

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

Exemplo

Tomemos um exemplo que define a funcionalidade básica do acordeão. Dê uma olhada no código a seguir.

<!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>

Você receberá a seguinte saída -

Resultado

Opções de acordeão

O acordeão oferece recursos incríveis. Esses recursos ajudam a ajustar as opções para fornecer saída personalizada.

exibição

Esta opção determina qual elemento é mostrado no carregamento da página. O padrão é definido como 0, portanto, o primeiro elemento é mostrado. Para definir outro elemento, basta inserir outro inteiro que corresponda ao seu índice. Ao contrário de “show”, a tela fará a transição do elemento aberto.

Syntax

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

exposição

Muito parecido com “display,” show determina qual elemento será aberto quando a página for carregada, mas em vez de uma transição, “show” apenas fará com que o conteúdo seja exibido no carregamento sem qualquer transição.

Syntax

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

altura

Quando definido como verdadeiro, um efeito de transição de altura ocorrerá ao alternar entre os elementos exibidos. Esta é a configuração de acordeão padrão que você vê acima.

Syntax

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

largura

Isso funciona da mesma forma que heightopção. No entanto, em vez de fazer a transição da altura para mostrar o conteúdo, isso ajuda na transição da largura. Se você usar “largura” com uma configuração padrão, como usamos acima, o espaço entre a alternância do título permanecerá o mesmo, com base na altura do conteúdo. O div de "conteúdo" fará a transição da esquerda para a direita para ser exibido nesse espaço.

Syntax

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

opacidade

Esta opção determina se deve ou não mostrar um efeito de transição de opacidade quando você oculta ou exibe algum conteúdo. Como estamos usando as opções padrão acima, você pode ver o efeito lá.

Syntax

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

fixedHeight

Para definir uma altura fixa, você precisa fixar um número inteiro (por exemplo, você pode colocar 100 para o conteúdo 100px de altura). Isso deve ser usado com algum tipo de propriedade de estouro de CSS se você estiver planejando ter uma altura fixa menor do que a altura natural do conteúdo.

Syntax

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

Largura fixa

Assim como “fixedHeight” acima, isso definirá a largura se você fornecer um inteiro a essa opção.

Syntax

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

sempre esconda

Esta opção permite adicionar um controle de alternância aos títulos. Com isso definido como verdadeiro, quando você clicar em um título de conteúdo aberto, o elemento de conteúdo será fechado automaticamente sem abrir mais nada. Você pode ver a execução no exemplo a seguir.

Syntax

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

Eventos de acordeão

Esses eventos permitem que você crie sua funcionalidade para cada ação do acordeão.

onActive

Isso será executado quando você alternar para abrir um elemento. Ele vai passar o elemento de controle toggle e o elemento de conteúdo que está abrindo e também os parâmetros.

Syntax

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

onBackground

Isso é executado quando um elemento começa a se ocultar e passa por todos os outros elementos que estão fechando, mas não abrindo.

Syntax

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

onComplete

Este é o seu evento onComplete padrão. Ele passa uma variável que contém o elemento de conteúdo.

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ão

Esses métodos ajudam a criar e manipular Seções de Acordeão.

addSection ()

Com este método, você pode adicionar uma seção (um par de elemento de alternância / conteúdo). Funciona como muitos dos outros métodos que vimos. Primeiro, refira-se ao objeto acordeão, use .addSection, então você pode chamar o id do título, o id do conteúdo e, finalmente, indicar em que posição você deseja que o novo conteúdo apareça (0 sendo o primeiro local).

Syntax

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

Note- Quando você adiciona uma seção como esta, embora ela apareça no local do índice 2, o índice real será +1 do último índice. Portanto, se você tiver 5 itens em seu array (0-4) e adicionar um ^6º , seu índice será 5, independentemente de onde você o adiciona com .addSection ();

exibição()

Isso permite que você abra um determinado elemento. Você pode selecionar o elemento por seu índice (portanto, se você adicionou um par de elementos e deseja exibi-lo, terá um índice diferente do que utilizaria acima.

Syntax

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

Example

O exemplo a seguir explica o recurso Acordeão com alguns efeitos. Dê uma olhada no código a seguir.

<!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

Clique em cada seção Alternar, então você encontrará os dados ocultos e os indicadores de evento para cada ação.

↰ Previous page Next page ↱