Mootools 1.2教程(20)——选项卡效果(Tabs)(3)
作者:Fdream 来源:Fdream博客 时间:2008-12-26 18:19:00
代码示例
下面的这个示例和上面的示例差不多,不过当你快速地点击两个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)
也包含你开始实践所需要的所有东西。
标签:Mootools,Tabs,教程,选项卡,javascript
0
投稿
猜你喜欢
Dreamweaver2004 中文乱码解决方案
2007-01-31 10:20:00
客户端数据存储–超越cookies
2008-01-15 13:01:00
Sql Server 2000内存调整
2010-04-25 11:24:00
DIV+CSS高度自适应网页代码实例
2008-09-20 08:00:00
CSS框架/命名/规则 注意要点
2008-06-03 13:07:00
分析Silverlight Button控件布局
2009-02-17 13:13:00
使用SQL2000将现有代码作为Web服务提供
2009-02-19 17:20:00
ASP+MSSQL2000 数据库被批量注入后的解决方法第1/2页
2011-04-06 10:50:00
ASP调用数据库常见错误的解决
2007-09-07 10:05:00
《悟透JavaScript》之 甘露模型
2008-06-09 14:03:00
在SQL server2005数据库下创建计划任务
2008-12-26 09:19:00
用ASP实现分级权限控制
2008-10-09 13:02:00
Access为后台数据库的网站统计系统
2008-11-16 17:34:00
CSS中背景background的一些语法
2009-03-24 21:02:00
ASP中查询数据库记录写入XML文件示例
2007-08-23 13:12:00
ASP与MySQL的连接[图文教程]
2010-03-14 11:21:00
面向对象的CSS
2009-07-03 12:23:00
css清除浮动的最优方法
2008-04-25 22:33:00
实现MySQL远程访问办法
2010-11-25 17:17:00
asp如何修改WINNT的登录密码?
2010-06-10 17:06:00