软件开发培训班 >> 编程开发 >> JavaScript


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

　　本文标签：Mootools,选项卡

简单的“额外信息”标签（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注：这个意思就是说，这一系列的教程中，覆盖的内容还不够全面，因此强烈建议大家仔细阅读全部文档 。）

下载最后一个示例的代码

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