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

实例演示

这里我们有一个全功能的手风琴，使用了上面我们看到的所有事件和方法，还有非常多的选项。仔细阅读下面的代码和代码内相关的注释，看看它们是怎么使用的。

参考代码：  

// 把开关元素和内容元素赋值给两个变量 
var toggles = $$('.togglers'); 
var content = $$('.elements'); 

// 建立一个对象变量 
// 使用new创建一个新的手风琴对象 
// 设置开关数组 
// 设置内容数组 
// 设置相关选项和事件 
var AccordionObject = new Accordion(toggles, content, { 
    // 当页面载入后 
    // 这将显示（show）内容元素（对应索引的元素） 
    // 没有任何渐变动画，只是展开 
    // 同时注意：如果你使用了“fixedHeight”， 
    // 当页面第一次载入时，show选项将不会起作用 
    // "show"选项会覆盖"display"选项 
    show: 0,  


    // 当页面载入后 
    // 这将显示（display）内容元素（对应索引的元素） 
    // 内容展开时将有渐变动画 
    // 如果同时设置了display选项和show选项 
    // show选项将覆盖display选项 
    // display: 0, 

    // 默认为true 
    // 这将创建一个垂直的手风琴 
    height : true, 

    // 这是水平手风琴参数使用的 
    // 由于牵涉到CSS，这个会比较复杂 
    // 我们在后面的某一讲中再讲一下？ 
    width : false, 

    // 默认为true 
    // 这将会给内容一个不透明度的渐变效果 
    opacity: true, 

    // 默认为false，也可以是一个整数 -  
    // 将固定所有内容区块的高度 
    // 需要设置css中的overflow规则 
    // 如果使用了"show"，在页面第一次载入时不会生效 
    fixedHeight: false,  

    // 可以为false或者一个整数 
    // 和上面的fixedHeight类似， 
    // 不过这是针对水平手风琴的设置 
    fixedWidth: false, 

    // 可以让你开关一个展开的项 
    alwaysHide: true, 

    // 标准的onComplete事件 
    // 为每一个内容块元素传递一个变量         
    onComplete: function(one, two, three, four, five){ 
        one.highlight('#5D80C8'); // 蓝色 
        two.highlight('#5D80C8'); 
        three.highlight('#5D80C8'); 
        four.highlight('#5D80C8');  
        five.highlight('#5D80C8'); // 这是添加的节 
        $('complete').highlight('#5D80C8'); 
    }, 

    // 这个事件将在你开关一个元素时触发 
    // 将会传递正在打开的开关元素 
    // 和内容元素 
    onActive: function(toggler, element) { 
        toggler.highlight('#76C83D'); // 绿色 
        element.highlight('#76C83D'); 
        $('active').highlight('#76C83D'); 
    }, 

    // 这个事件将在一个元素开始隐藏时触发 
    // 将会传递所有正在关闭的元素 
    // 或者没有展开的元素 
    onBackground: function(toggler, element) { 
        toggler.highlight('#DC4F4D'); // 红色 
        element.highlight('#DC4F4D');     
        $('background').highlight('#DC4F4D');     
    } 
}); 

$('add_section').addEvent('click', function(){ 
    // 新增加的节是成对的  
    // （包括开关的id和相关的内容的id） 
    // 后面是它们要放置的位置的索引 
    AccordionObject.addSection('togglersID', 'elementsID', 0);     
}); 

$('display_section').addEvent('click', function(){ 
    // 将决定哪个元素在页面第一次载入时显示 
    // 将覆盖display选项的设置 
    AccordionObject.display(4); 

要注意的地方

.display可以识别索引（index），不过如你使用了addSection方法，那么这一节将使用最后一个索引

更多手风琴选项、事件和方法

手风琴（Accordion）类继承自Fx.Element类，而Fx.Element类又继承自Fx类。你可以使用这些类的各种选项来优化你的手风琴（Accordion）。虽然它看起来是个很简单的东西，但是手风琴是一个非常有用和强大的插件。我非常乐意看到有人利用这个做出的任何效果。

更多学习

参考文档中的accordion这一节，还有Fx.Elements和Fx这两节。你还可以看看MooTools官方demo中的accordion的使用。

远程下载：下载一个包含你开始所需要的所有东西的zip包

asp之家下载地址：mootorial_day17_accordion.zip （37.00 KB）

包括MooTools 1.2的核心库和扩展（更多）库，上面的示例，一个外部的JavaScript文件，一个简单的HTML页面和一个CSS文件。