accordion.md.svn-base

一款开源强大的javascript控件

Class: Accordion {#Accordion}
=============================

手风琴组件(对一组内容区域进行折叠/展开). 

当其中一个内容区域展开时, 则其他内容区域将自动折叠.

### 备注:

- Accordion 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE
- Accordion 的折叠元素将被删除掉padding和border(为了能正确执行特效)

### 继承:

[Fx.Elements][]

### 语法:

	var myAccordion = new Accordion(togglers, elements[, options]);

### 参数:

1. togglers - (*array*) 内容区域展开或折叠的开关元素
2. elements - (*array*) 内容区域元素
3. options  - (*object*, 可选) [Fx][]的所有可选项, 以及以下可选项:

#### 可选项:

* display     - (*integer*: 默认为 0)     默认展开的区域的索引号(显示时带滑动特效)
* show        - (*integer*: 默认为 0)     默认展开的区域的索引号(不带特效)
* height      - (*boolean*: 默认为 true)  如果为true, 则展开/折叠内容元素时高度产生渐变特效
* width       - (*boolean*: 默认为 false) 如果为true, 则展开/折叠内容元素时宽度产生渐变特效
* opacity     - (*boolean*: 默认为 true)  如果为true, 则展开/折叠内容元素时产生透明度变换特效
* fixedHeight - (*boolean*: 默认为 false) 如果为一个整数, 则展开的内容元素的高度将固定为该数值
* fixedWidth  - (*boolean*: 默认为 false) 如果为一个整数, 则展开的内容元素的宽度将固定为该数值
* alwaysHide  - (*boolean*: 默认为 false) 是否允许将所有内容区域折叠的情况(如为false, 则将总有一个内容区域被展开着)

### 返回值:

* (*object*) Accordion实例

## 事件:

### active

* (*function*) 当一个区域将被展开时触发

#### 标识:

	onActive(toggler, element)

#### 参数:

1. toggler - (*element*) 正在展开的区域的开关元素
2. element - (*element*) 正在展开的区域的内容元素

### background

* (*function*) 当一个区域将被折叠时触发

#### 标识:

	onBackground(toggler, element)

#### 参数:

1. *toggler* - (element) 正在折叠的区域的开关元素
2. *element* - (element) 正在折叠的区域的内容元素

### 示例:

	var myAccordion = new Accordion($$('.togglers'), $$('.elements'), {
		display: 2,
		alwaysHide: true
	});

### 演示:

- Accordion - <http://demos.mootools.net/Accordion>



Accordion 方法: addSection {#Accordion:addSection}
----------------------------------------------------

向Accordion的指定位置动态添加一个可展开/折叠区域

###	语法:

	myAccordion.addSection(toggler, element[, pos]);

###	参数:

1. toggler - (*element*) 内容区域的开关元素
2. element - (*element*) 内容区域元素
3. pos     - (*integer*, 可选, 默认为 最后一个) 插入的位置的索引号

###	返回值:

* (*object*) Accordion实例

### 示例:

	var myAccordion = new Accordion($$('.togglers'), $$('.elements'));
	myAccordion.addSection('myToggler1', 'myElement1'); 	// 在myAccordion末尾新添加一个可展开/折叠区域
	myAccordion.addSection('myToggler2', 'myElement2', 0); 	// 在myAccordion最前部新添加一个可展开/折叠区域



Accordion 方法: display {#Accordion:display}
----------------------------------------------

指定展开某个区域

###	语法:

	myAccordion.display(index);

###	参数:

1. index - (*mixed*) 要展开的区域的索引号或元素

### 返回值:

* (*object*) Accordion示例

### 示例:

	// 每隔2.5秒自动切换展开下一个折叠区域
	var myAccordion = new Accordion('.togglers', '.elements', {
		onComplete: function(){
			this.display.delay(2500, this, (this.previous + 1) % this.togglers.length);
		}
	});



[Fx]: /Fx/Fx
[Fx.Elements]: /Fx/Fx.Elements