Mootools 1.2教程(20)——选项卡效果(Tabs)(2)
作者:Fdream 来源:Fdream博客 时间:2008-12-26 18:19:00
给Tab的内容块加上形变
通过扩展我们上面的代码,我们可以添加一些形变效果来显示我们隐藏的内容区块。首先,我们可以像以前那样创建一个Fx.Morph效果,不过在这里要设置不同的样式。当然,我们还需要创建我们的形变(Morph)对象:
参考代码:
var showFunction = function() {
// 在形变之前初始化所有样式
$$('.hiddenM').setStyles({
'display': 'none',
'opacity': 0,
'background-color': '#fff',
'font-size': '16px'
});
// 在这里开始形变,并指定形变后的样式
this.start({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c',
'font-size': '31px'
});
}
window.addEvent('domready', function() {
var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM');
var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM');
// 创建一个形变对象
elOneM = new Fx.Morph(elOneM, {
link: 'cancel'
});
elTwoM = new Fx.Morph(elTwoM, {
link: 'cancel'
});
elThreeM = new Fx.Morph(elThreeM, {
link: 'cancel'
});
elFourM = new Fx.Morph(elFourM, {
link: 'cancel'
});
$('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM));
$('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
注意:如果你快速地点击上面的示例,你将看的会同时出现多个内容区块。从根本上讲,如果showFunction在上一个形变完成之前调用,它将不会隐藏其他的区块内容。要解决这个问题,我们需要打破这一规则,并充分利用Fx.Elements。
标签:Mootools,Tabs,教程,选项卡,javascript
0
投稿
猜你喜欢
操作设计要素
2011-03-04 16:23:00
CSS hacks与争议
2007-11-19 12:56:00
MHTML在ie7/vista bug 解决方案
2010-02-01 12:42:00
asp利用Split函数进行多关键字检索
2011-03-16 11:10:00
js实现用div层模拟的小窗口
2007-12-02 15:01:00
整理几个js日历源代码
2008-01-03 13:13:00
一个用Ajax做的用户名验证程序
2007-10-21 20:40:00
在ASP中使用SQL语句之5:开始执行
2007-08-11 12:36:00
js仿googl拖拽效果
2007-09-29 13:16:00
form表单的submit方法和submit事件
2008-10-15 11:22:00
白鸦:界面烂还是界面设计烂?
2008-04-03 16:05:00
WEB2.0网页制作标准教程(10)自适应高度
2008-02-19 19:21:00
有关Oracle数据库的备份情况
2010-07-30 13:21:00
如何提升JavaScript的运行速度(DOM篇)[译]
2009-02-25 12:24:00
SQL查询入门(中篇)
2011-09-30 11:15:09
最简便的备份MySQL数据库的方法
2008-12-25 13:16:00
将mater库中的系统存储过程批量生成*.sql文件 通用且非常实用
2012-06-06 20:03:43
解析:怎样在MySQL中获得更好的搜索结果
2008-11-27 15:19:00
让SQL Server数据库自动执行管理任务(二)
2009-03-20 11:40:00
带你深入了解Access数据库的4种安全方式
2008-11-28 14:34:00