Mootools 1.2教程 选项卡效果（Tabs）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Mootools 1.2教程 选项卡效果（Tabs），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7252字，纯文字阅读大概需要11分钟。

内容图文

// 这里是我们的菜单 
<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注：这个意思就是说，这一系列的教程中，覆盖的内容还不够全面，因此强烈建议大家仔细阅读全部文档。） 

下载最后一个示例的代码

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


           
                
                                                

内容总结

以上是互联网集市为您收集整理的Mootools 1.2教程 选项卡效果（Tabs）全部内容，希望文章能够帮你解决Mootools 1.2教程 选项卡效果（Tabs）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端