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)
也包含你开始实践所需要的所有东西。
0
投稿
猜你喜欢
- <div class=”A” style=”position:relative;”>A 
- 从今天起,我将陆续将 ppk on JavaScript 的读书心得发布到这个blog上。ppk是我所景仰的一位web开发者,原因无它,只是
- css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果。最近越来越多的blog
- 写在前面的话:Part 1记得刚毕业那时,常幻想着自己是个大艺术家,满怀憧憬的想找一份理想的工作。后来入了行,慢慢的发现自己好像不是这块料;
- 看了不少朋友的个人网站,有一个小问题,似乎很多朋友都忽略了,那就是版权声明的写法。虽然那只是一小行字,不过作为设计师也好,作为个人的爱好也好
- 分享人:月漓作为交互设计师,你是否在一个项目中花费大量的时间来沟通、修改、明确需求?其实这些前期工作(设计原型前)是我们和PD、运营、开发之
- 一直也搞不清楚px与em之间的关系和特点,看过95%的中国网站需要重写CSS以后后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字
- 以下为引用的内容:DROP PROCEDURE test_insert ;DELIMITER ;;CREATE PROCEDURE test
- 前言:最近某个时间开始,特别留意了一下Web标准中柱状图,也就是英文中的bar graph的实现。虽然实现方法各异,效果不尽相同,但是总体来
- //图片上传<SCRIPT RUNAT=SERVER LANGUAGE=VBSCRIPT> Function GetUpload
- 在进行数据库的查询时,会经常遇到这样的情况:例如想在一个用户数据库中查询他的用户名和他的密码,但恰好该用户使用的名字和密码中有特殊的字符,例
- 在实现TextStraem的时候,找到判断文件编码的代码是VBS的,但是在JScript中是没有ASC等函数的,也不能对二进制数据进行处理,
- 以前没见过这个效果,滚动纵向滚动条看看效果就明白了这样的效果,广告商应该比较喜欢。<!DOCTYPE html PUBLIC &quo
- 这段时间,关于asp的前途,关于asp的好坏的讨论贴,都有好些了。当然,大家的心都是好的,但是一些朋友说的话,真是让人郁闷。个人觉得,在现在
- 先看看单条 SQL 语句的分页 SQL 吧。 方法1: 适用于 SQL Server 2000/2005 代码如下:SELECT TOP 页
- 如何在寸土寸金的首页上使页面的价值最大化,是每个网站设计者最关心的话题。用户关注的页面长度、宽度都是有限的。宽度自不必说,一般网站都会根据自
- 在我的前一篇教程《九宫格基本布局》中,我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法,好像制作
- 代码如下:Class XMLClass Private objXml Private xmlDoc Private xmlPath '
- 问题:在论坛发表回复时出现“The table is full”的提示,字面意义上是数据表已满的意思。因为很少有开发者遭遇单一表超过4G的情
- li {list-style-image: url(images/disc.gif);}li的这个样式定义是将列表项目使用图片来代替显示的小