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 相关文章推荐
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
python数据结构之图的实现方法
2015/07/08 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python生成二维码的实例详解
2017/10/29 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
医院病假条范文
2015/08/17 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL