Mootools 1.2教程(20)——选项卡效果(Tabs)(3)
作者:Fdream 来源:Fdream博客 发布时间:2008-12-26 18:19:00
标签:Mootools,Tabs,教程,选项卡,javascript
代码示例
下面的这个示例和上面的示例差不多,不过当你快速地点击两个tab时,将不会同时出现多个内容div。
参考代码:
// 创建一个隐藏所有元素的函数
// 你可以把元素作为参数传递进来
var hideAll = function(fxElementObject){
fxElementObject.set({
'0': {
'display': 'none'
},
'1': {
'display': 'none'
},
'2': {
'display': 'none'
},
'3': {
'display': 'none'
}
});
}
// 这里我们为每个内容区块创建一个函数
var showFunctionOne = function() {
// 首先,调用函数hideAll
// 然后Fx.element对象的引用“this”作为参数传入
hideAll(this);
// 开始相应元素的Fx.element形变动画
this.start({
'0': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionTwo = function() {
hideAll(this);
this.start({
'1': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionThree = function() {
hideAll(this);
this.start({
'2': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionFour = function() {
hideAll(this);
this.start({
'3': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
window.addEvent('domready', function() {
// 建立一个数组来保存Fx.elements
var morphElements = $$('.hiddenMel');
// 创建一个新的Fx.Element对象
var elementEffects = new Fx.Elements(morphElements, {
// 设置"link"选项的值为cancel
link: 'cancel'
});
$('oneMel').addEvent('click', showFunctionOne.bind(elementEffects));
$('twoMel').addEvent('click', showFunctionTwo.bind(elementEffects));
$('threeMel').addEvent('click', showFunctionThree.bind(elementEffects));
$('fourMel').addEvent('click', showFunctionFour.bind(elementEffects));
});
更多学习
这篇教程更多地是复习和应用我们在以前的教程中学些的东西。因此,如果你还么准备好,我们建议你全面阅读相应的文档。这比听起来的会更有趣。如果你是刚接触这个库的,但是一直在学习这一系列的教程,你可能会对你了解的程度非常的惊讶。(Fdream注:这个意思就是说,这一系列的教程中,覆盖的内容还不够全面,因此强烈建议大家仔细阅读全部文档。)
远程下载:下载最后一个示例的代码 (44.44 KB)
asp之家下载地址:mootorial_day20_tabs.zip (44.44 KB)
也包含你开始实践所需要的所有东西。


猜你喜欢
- 1、打开插件市场链接:ext.dcloud.net.cn/plugin?id=2…点击红色框按钮绑定包名,这个包名与后
- 简介 函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着 .NET 平台上的
- 变量名1、组成:数字、字母、下划线2、变量名要有意义3、多个单词则用下划线,如user_id4、python的变量名不要驼峰显示字符串:1、
- 目录前置知识有哪些可变对象,哪些不可变对象?不可变对象和可变对象的区别?不可变对象的应用场景从内存角度出发说下有什么区别?不可变对象可变对象
- SQL Server 2005附加数据库文件时出现了Read-Only错误,附加的时候,系统提示mdf文件为只读,可是打开文件属性,这个属性
- 对图片进行resize、裁剪、旋转、翻转图片处理时常用的手段有resize、裁剪、旋转、翻转,简单介绍一下python中怎么利用PIL库和t
- 本文提供了三种不同的方式在Python(IPython Notebook)中调用ggplot。在大数据时代,数据可视化是一个非常热门的话题。
- 本文实例分析了thinkphp的四种url访问方式。分享给大家供大家参考。具体分析如下:一、什么是MVC thinkphp的MV
- new和makenew// The new built-in function allocates memory. The first ar
- 解决Can't connect to MySQL server on 'localhost' (10048), 一般
- Golang中的errorGolang中的 error 就是一个简单的接口类型。只要实现了这个接口,就可以将其视为一种 errortype
- 在进行文本分析、提取关键词时,新闻评论等文本通常是中英文及其他语言的混杂,若不加处理直接分析,结果往往差强人意。下面对中英文文本进行分离做一
- 因为写别的程序想要一边遍历一边删除列表里的元素,就写了一个这样的程序进行测试,这样写出来感觉还挺简洁的,就发出来分享一下。代码l=list(
- 在运行复杂的Python程序时,执行时间会很长,这时也许想提高程序的执行效率。但该怎么做呢?首先,要有个工具能够检测代码中的瓶颈,例如,找到
- 一、触发器概念触发器是SQL server提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,是由事件来触
- 本文实例讲述了PHP缓存集成库phpFastCache用法。分享给大家供大家参考。具体分析如下:phpFastCache是一个开源的PHP缓
- NLTK 是使用 Python 教学以及实践计算语言学的极好工具。此外,计算语言学与人工 智能、语言/专门语言识别、翻译以及语法检查等领域关
- 发版前接到一个临时新需求 ,需要在web端地址选择时用地图,并获取经纬度。 临阵发版之际加需求,真的是很头疼,于是赶紧找度娘,找api。 我
- 如何用我的国际域名做虚拟域名?config.asp<%Domain_URL = "intels.net&
- 在对于python中类的使用上,我们分出了子类和父类两种。对于这二者之间的关系,我们可以简单理解为继承。不过python中加入了实例的讨论,