Mootools 1.2教程(17)——手风琴插件

Mootools 1.2手风琴（Accordion）教程

原文地址：30 Days of Mootools 1.2 Tutorials - Day 17 - Accordion

阅读上一讲：Mootools 1.2教程(16)——排序类和方法简介

继续我们的“更多”（More）库里面的插件教程，今天我们来学习一下可能是最流行最受欢迎的插件——手风琴。创建和配置一个基本的手风琴很简单，但是你一定要认真看完全文，因为更多的高级选项可能有一些复杂。

基础知识

创建一个新的手风琴

要创建一个新的手风琴，你需要选择一些成对的元素——包含标题和内容。因此，首先，需要给每一个标题和每一个内容块分别指定一个css类名：

参考代码： 

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

现在，我们选择所有css类名为“togglers”和所有css类名为“elements”的元素，并把它们赋值给变量，然后初始化一个手风琴对象。

参考代码： 

var toggles = $$('.togglers'); 
var content = $$('.elements'); 

// 创建你的对象变量 
// 使用“new”创建一个新的手风琴对象 
// 设置开关（toogle）数组 
// 设置内容数组 
var AccordionObject = new Accordion(toggles, content);

手风琴的默认设置给你的效果可能是这样的：

Toggle 1

Here is the content of toggle 1

Toggle 2

Here is the content of toggle 2

Toggle 3

Here is the content of toggle 3

选项

当然，如果你想要手风琴默认效果以外的东西，你需要调整一下选项。在这里我们将逐个讲解。

display

默认为0

这个选项决定了当页面加载后哪个元素会显示出来。默认值为0，因此第一个元素会显示出来。如果要设置为其他元素，只需要设置为另外一个元素的索引值（为整数）就可以了。和“show”不一样，“display”将会使用渐变动画让元素展开。

参考代码： 

var AccordionObject = new Accordion(toggles, content {  
    display: 0 // 默认为0 

show

默认为0

和“display”非常类似，“show”决定了当页面加载后那个元素将会展开，不过它没有渐变动画，它只是在页面加载后显示出来，而不使用任何渐变动画。

参考代码：  

var AccordionObject = new Accordion(toggles, content {  
    display: 0 // 默认为0

height

默认为true

当设置为true，内容显示时，将有高度渐变动画效果。这和你上面看到的一样，是一个标准的手风琴设置。

参考代码： 

var AccordionObject = new Accordion(toggles, content {  
    height: true // 默认为true 

width

默认为false

和“height”类似，不过不是使用高度渐变动画来显示内容，而是使用宽度渐变动画来显示内容。如果你把“width”选项和其他我们看到的标准设置一起使用，各个标题开关之间的距离将保持不变，这个距离完全基于内容的高度。内容的div将会从左到右，宽度逐渐变宽来显示内容。

参考代码： 

var AccordionObject = new Accordion(toggles, content {  
    width: false // 默认为false  

opacity

默认为true

这个选项设置了当你隐藏或者显示内容时，是否使用不透明度渐变效果。由于我们在上面使用了默认设置，所以你可以看到效果。

参考代码： 

var AccordionObject = new Accordion(toggles, content {  
    opacity: true // 默认为true 

fixedHeight

默认为false

要设置一个固定的高度，你可以在这里设置一个整数（例如，你可以设置100，从而可以使得内容的高度为100px）。如果你准备设置的高度小于内容的高度，在这里你需要在CSS中设置一下内容的overflow属性。和你可能的期望一样，当你使用“show”选项时，当页面第一次载入时，它是不会生效（被注册）的。

参考代码： 

var AccordionObject = new Accordion(toggles, content {  
    fixedHeight: false // 默认为false 

fixedWidth

默认为false

和上面的“fixedHeight”类似，如果你给了这个选项一个整数，这将设置它的宽度。

参考代码：  

var AccordionObject = new Accordion(toggles, content {  
    fixedWidth: false // 默认为false 

alwaysHide

默认为false

这个选项可以让你给标题增加一个开关。通过把这个选项设置为true，当你点击一个内容已经展开的标题时，它将关闭这个内容块，但是不会展开任何元素。你马上就可以在下面的例子中看到。

参考代码： 

var AccordionObject = new Accordion(toggles, content {  
    alwaysHide: false // 默认为false