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 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
处理canvas绘制图片模糊问题
May 11 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
JavaScript替换当前页面的方法
2015/04/03 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python 的topk算法实例
2020/04/02 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
请介绍一下Ant
2016/07/22 面试题
住房公积金接收函
2014/01/09 职场文书
大学生找工作求职信
2014/07/09 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
北京故宫导游词
2015/01/31 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
趣味运动会简讯
2015/07/20 职场文书