|
|
继续我们的“更多”（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
});
事件
onActive
当你开关一个元素时触发这个事件。他将会传递这个开关控制元素和内容元素，还有开关状态作为参数。
参考代码：
复制代码 代码如下:
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); // 绿色
element.highlight('#76C83D');
}
});
onBackground
当ige元素开始隐藏时触发这个事件，它将传递所有其他正则关闭的元素作为参数，而不是展开的元素。
参考代码：
复制代码 代码如下:
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); // 红色
element.highlight('#DC4F4D');
}
});
onComplete
这是一个标准的onComplete事件。它传递一个包含内容元素的变量。这里又一种更好的方式获取这些东西，如果有人知道，可以作个记录。
参考代码：
复制代码 代码如下:
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); // 蓝色
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});
方法
.addSection();
通过这个方法，你可以在中间添加一节（一个标题/内容元素对）。这个我们见过的许多其他方法一样。首先，我们引用一个手风琴对象，在后面加上.addSection，然后你可以调用标题的id、内容的id，最后给它指定一个位置——这个新元素要出现的位置（0是第一个位置）。
参考代码： [复制代码] [保存代码]
AccordionObject.addSection('togglersID', 'elementsID', 2);
注意：当你通过这个方式添加一节，虽然它会在索引值为2的地方显示，但是它的真实索引应该是最后一个索引值加1。如果你在一个数组中有5个项，然后你添加了第六个，它的索引值则为5，而不管你通过.addSection();方法把它添加在了什么地方。
.display();
这个方法可以让你展开一个指定的元素。你可以通过它的索引值来选择这个元素（如果你添加了一个新的元素对，你又想展开它们，你需要使用一个新的索引值）。
参考代码：
复制代码 代码如下:
AccordionObject.display(5); // 这将显示你新增加的元素
实例演示
这里我们有一个全功能的手风琴，使用了上面我们看到的所有事件和方法，还有非常多的选项。仔细阅读下面的代码和代码内相关的注释，看看它们是怎么使用的。
参考代码：
复制代码 代码如下:
// 把开关元素和内容元素赋值给两个变量
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);
});
这里你可以看到事件是什么时候触发的。
onCompleteonActiveonBackground
可以试试用下面的按钮添加一对内容。
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 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
Toggle 4
Here is the content of toggle 4
Toggle Add
Here is the content of toggle 4
要注意的地方
.display可以识别索引（index），不过如你使用了addSection方法，那么这一节将使用最后一个索引
如果你使用了“fixedHeight”选项，在“show”选项下不会起任何作用，但是在“display”选项下会有作用
更多手风琴选项、事件和方法
手风琴（Accordion）类继承自Fx.Element类，而Fx.Element类又继承自Fx类。你可以使用这些类的各种选项来优化你的手风琴（Accordion）。虽然它看起来是个很简单的东西，但是手风琴是一个非常有用和强大的插件。我非常乐意看到有人利用这个做出的任何效果。
更多学习
参考文档中的accordion这一节，还有Fx.Elements和Fx这两节。你还可以看看MooTools官方demo中的accordion的使用。
下载一个包含你开始所需要的所有东西的zip包
包括MooTools 1.2的核心库和扩展（更多）库，上面的示例，一个外部的JavaScript文件，一个简单的HTML页面和一个CSS文件。 |
|
发表于 2009-9-15 22:11:40
