Mootools 1.2教程 选项卡效果(Tabs)


Posted in Javascript onSeptember 15, 2009

简单的“额外信息”标签(TAB)
鼠标移上去显示内容的TAB
在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容。首先,我们来完成HTML代码——我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项):
参考代码:

// 这里是我们的菜单 
<ul id="tabs"> 
<li id="one">One</li> 
<li id="two">Two</li> 
<li id="three">Three</li> 
<li id="four">Four</li> 
</ul> 
// 这里是我们的内容div 
<div id="contentone" class="hidden">content for one</div> 
<div id="contenttwo" class="hidden">content for two</div> 
<div id="contentthree" class="hidden">content for three</div> 
<div id="contentfour" class="hidden">content for four</div>

现在,我们不需要关心怎么把它们做得漂亮。在CSS中,我们要做的全部事情就是把内容区块隐藏起来:
参考代码: [复制代码] [保存代码]
.hidden {
display: none;
}
好了,现在开始写MooTools代码。如果我们需要当用户把鼠标移上去的时候显示内容,当鼠标离开的时候隐藏内容,我们需要完成这样两个函数:
参考代码:
var showFunction = function() { 
this.setStyle('display', 'block'); 
} 
var hideFunction = function() { 
this.setStyle('display', 'none'); 
}

还有一些事件:
参考代码:
window.addEvent('domready', function() { 
// 这里我们可以把容器元素赋值给一个变量 
var elOne = $('contentone'); 
$('one').addEvents({ 
// 当鼠标进入的时候,我们调用showFunction 
// 并绑定这个元素elOne 
// 因此我们需要把它作为函数参数 
'mouseenter': showFunction.bind(elOne), 
'mouseleave': hideFunction.bind(elOne) 
}); 
}); 
现在,我们只需要为每个tab重复这个模式,并指定对应的内容区块就可以了。下面是完整的代码: 
参考代码: [复制代码] [保存代码] 
// 这里是用来改变样式的函数 
var showFunction = function() { 
this.setStyle('display', 'block'); 
} 
var hideFunction = function() { 
this.setStyle('display', 'none'); 
} 
window.addEvent('domready', function() { 
// 在这里我们把我们的内容块赋值给不同变量 
var elOne = $('contentone'); 
var elTwo = $('contenttwo'); 
var elThree = $('contentthree'); 
var elFour = $('contentfour'); 
// 给tab绑定事件 
$('one').addEvents({ 
// 设置事件类型 
// 并给事件控制函数绑定相应的变量 
'mouseenter': showFunction.bind(elOne), 
'mouseleave': hideFunction.bind(elOne) 
}); 
$('two').addEvents({ 
'mouseenter': showFunction.bind(elTwo), 
'mouseleave': hideFunction.bind(elTwo) 
}); 
$('three').addEvents({ 
'mouseenter': showFunction.bind(elThree), 
'mouseleave': hideFunction.bind(elThree) 
}); 
$('four').addEvents({ 
'mouseenter': showFunction.bind(elFour), 
'mouseleave': hideFunction.bind(elFour) 
}); 
});

正如你所看到的,这一切看起来都非常的熟悉,完成这些并不需要任何我们目前为止没有学过的东西。
One
Two
Three
Four
content for one
content for two
content for three
content for four
点击时显示内容的TAB
借鉴上面的想法,我们可以很轻松地调整它为点击时显示内容。我们就使用上面的HTML,然后修改一下MooTools代码,以完成点击事件。
首先,我们需要调整一下我们的函数。由于我们不能在鼠标离开时把内容隐藏起来,因此,我们需要换一种方式来切换这些div。可能最容易的选择是在点击时首先把它们全部隐藏起来,然后只把this(通过click事件传递进来的对象)所指的当前的内容显示出来。
参考代码:
var showFunction = function() { 
$$('.hiddenB').setStyle('display', 'none'); 
this.setStyle('display', 'block'); 
}

现在,当我们通过把元素绑定到一个函数上来传递这个变量时,它将隐藏其他的区块,并显示当前的区块。
接下来,我们还需要调整一下我们的事件。首先,我们只需要一个事件了,因此我们使用.addEvent();方法,然后还需要改变事件的类型为“click”。
参考代码:
window.addEvent('domready', function() { 
var elOneB = $('contentoneB'); 
var elTwoB = $('contenttwoB'); 
var elThreeB = $('contentthreeB'); 
var elFourB = $('contentfourB'); 
$('oneB').addEvent('click', showFunction.bind(elOneB)); 
$('twoB').addEvent('click', showFunction.bind(elTwoB)); 
$('threeB').addEvent('click', showFunction.bind(elThreeB)); 
$('fourB').addEvent('click', showFunction.bind(elFourB)); 
});

One
Two
Three
Four
content for one
content for two
content for three
content for four
给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)); 
});

如果我们使用和上面相同的HTML代码,我们将得到类似这样的效果:
One
Two
Three
Four
content for one
content for two
content for three
content for four
注意:如果你快速地点击上面的示例,你将看的会同时出现多个内容区块。从根本上讲,如果showFunction在上一个形变完成之前调用,它将不会隐藏其他的区块内容。要解决这个问题,我们需要打破这一规则,并充分利用Fx.Elements。
代码示例
下面的这个示例和上面的示例差不多,不过当你快速地点击两个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注:这个意思就是说,这一系列的教程中,覆盖的内容还不够全面,因此强烈建议大家仔细阅读全部文档。)

下载最后一个示例的代码

也包含你开始实践所需要的所有东西。

Javascript 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
Mootools 1.2教程 Tooltips
Sep 15 #Javascript
Mootools 1.2教程 类(一)
Sep 15 #Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 #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
You might like
PHP中的session安全吗?
2016/01/22 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python编写屏幕截图程序方法
2015/02/18 Python
python中随机函数random用法实例
2015/04/30 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python变量和字符串详解
2017/04/29 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python any()函数的使用方法
2019/10/28 Python
Python函数式编程实例详解
2020/01/17 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
社区工作感言
2014/02/21 职场文书
法人授权委托书
2014/04/03 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
安全生产演讲稿
2014/05/09 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
Oracle中DBLink的详细介绍
2022/04/29 Oracle