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 elementExample
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.