Mootools 1.2 手风琴(Accordion)教程


Posted in Javascript onSeptember 15, 2009

创建和配置一个基本的手风琴很简单,但是你一定要认真看完全文,因为更多的高级选项可能有一些复杂。
基础知识
创建一个新的手风琴
要创建一个新的手风琴,你需要选择一些成对的元素——包含标题和内容。因此,首先,需要给每一个标题和每一个内容块分别指定一个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.ElementsFx这两节。你还可以看看MooTools官方demo中的accordion的使用

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

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

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
Javascript的比较汇总
Jul 25 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 #Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 #Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 #Javascript
Mootools 1.2教程 正则表达式
Sep 15 #Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 #Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 #Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
模拟xcopy的函数
2006/10/09 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
js电话号码验证方法
2015/09/28 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python 多线程实例详解
2017/03/25 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python多线程之事件Event的使用详解
2018/04/27 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
JBL英国官网:JBL UK
2018/07/04 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
应届生法律求职信
2013/10/22 职场文书
开工典礼策划方案
2014/05/23 职场文书
银行求职自荐信
2014/06/30 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
给上级领导的感谢信
2015/01/22 职场文书
十七岁的单车观后感
2015/06/12 职场文书
整脏治乱工作简报
2015/07/21 职场文书
任命书格式模板
2015/09/22 职场文书
医学会议开幕词
2016/03/03 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript