Mootools 1.2教程選項卡效果（Tabs）

更新時間：2009年09月15日 22:36:18 作者：

今天將不只是受限于這個庫和一些基本的編程知識，我們來做一個簡單的小項目。通過使用我們目前為止已經(jīng)學過的一些知識，有幾種方式來創(chuàng)建當鼠標移上去或者點擊時顯示相應內(nèi)容的tab。

簡單的“額外信息”標簽（TAB）
鼠標移上去顯示內(nèi)容的TAB
在這第一個項目中，我們要創(chuàng)建一個簡單的菜單，當鼠標移動到這些菜單上時顯示相應的內(nèi)容。首先，我們來完成HTML代碼——我們就用包含四個列表項的ul好了，然后再創(chuàng)建四個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> 
// 這里是我們的內(nèi)容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> 

現(xiàn)在，我們不需要關(guān)心怎么把它們做得漂亮。在CSS中，我們要做的全部事情就是把內(nèi)容區(qū)塊隱藏起來：
參考代碼： [復制代碼] [保存代碼]
.hidden {
display: none;
}
好了，現(xiàn)在開始寫MooTools代碼。如果我們需要當用戶把鼠標移上去的時候顯示內(nèi)容，當鼠標離開的時候隱藏內(nèi)容，我們需要完成這樣兩個函數(shù)：
參考代碼：

復制代碼代碼如下:

 
var showFunction = function() { 
this.setStyle('display', 'block'); 
} 
var hideFunction = function() { 
this.setStyle('display', 'none'); 
} 

還有一些事件：
參考代碼：

復制代碼代碼如下:

 
window.addEvent('domready', function() { 
// 這里我們可以把容器元素賦值給一個變量 
var elOne = $('contentone'); 
$('one').addEvents({ 
// 當鼠標進入的時候，我們調(diào)用showFunction 
// 并綁定這個元素elOne 
// 因此我們需要把它作為函數(shù)參數(shù) 
'mouseenter': showFunction.bind(elOne), 
'mouseleave': hideFunction.bind(elOne) 
}); 
}); 
現(xiàn)在，我們只需要為每個tab重復這個模式，并指定對應的內(nèi)容區(qū)塊就可以了。下面是完整的代碼： 
參考代碼： [復制代碼] [保存代碼] 
// 這里是用來改變樣式的函數(shù) 
var showFunction = function() { 
this.setStyle('display', 'block'); 
} 
var hideFunction = function() { 
this.setStyle('display', 'none'); 
} 
window.addEvent('domready', function() { 
// 在這里我們把我們的內(nèi)容塊賦值給不同變量 
var elOne = $('contentone'); 
var elTwo = $('contenttwo'); 
var elThree = $('contentthree'); 
var elFour = $('contentfour'); 
// 給tab綁定事件 
$('one').addEvents({ 
// 設(shè)置事件類型 
// 并給事件控制函數(shù)綁定相應的變量 
'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
點擊時顯示內(nèi)容的TAB
借鑒上面的想法，我們可以很輕松地調(diào)整它為點擊時顯示內(nèi)容。我們就使用上面的HTML，然后修改一下MooTools代碼，以完成點擊事件。
首先，我們需要調(diào)整一下我們的函數(shù)。由于我們不能在鼠標離開時把內(nèi)容隱藏起來，因此，我們需要換一種方式來切換這些div?？赡茏钊菀椎倪x擇是在點擊時首先把它們?nèi)侩[藏起來，然后只把this（通過click事件傳遞進來的對象）所指的當前的內(nèi)容顯示出來。
參考代碼：

復制代碼代碼如下:

 
var showFunction = function() { 
$$('.hiddenB').setStyle('display', 'none'); 
this.setStyle('display', 'block'); 
} 

現(xiàn)在，當我們通過把元素綁定到一個函數(shù)上來傳遞這個變量時，它將隱藏其他的區(qū)塊，并顯示當前的區(qū)塊。
接下來，我們還需要調(diào)整一下我們的事件。首先，我們只需要一個事件了，因此我們使用.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的內(nèi)容塊加上形變
通過擴展我們上面的代碼，我們可以添加一些形變效果來顯示我們隱藏的內(nèi)容區(qū)塊。首先，我們可以像以前那樣創(chuàng)建一個Fx.Morph效果，不過在這里要設(shè)置不同的樣式。當然，我們還需要創(chuàng)建我們的形變（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'); 
// 創(chuàng)建一個形變對象 
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
注意：如果你快速地點擊上面的示例，你將看的會同時出現(xiàn)多個內(nèi)容區(qū)塊。從根本上講，如果showFunction在上一個形變完成之前調(diào)用，它將不會隱藏其他的區(qū)塊內(nèi)容。要解決這個問題，我們需要打破這一規(guī)則，并充分利用Fx.Elements。
代碼示例
下面的這個示例和上面的示例差不多，不過當你快速地點擊兩個tab時，將不會同時出現(xiàn)多個內(nèi)容div。
參考代碼：

復制代碼代碼如下:

 
// 創(chuàng)建一個隱藏所有元素的函數(shù) 
// 你可以把元素作為參數(shù)傳遞進來 
var hideAll = function(fxElementObject){ 
fxElementObject.set({ 
'0': { 
'display': 'none' 
}, 
'1': { 
'display': 'none' 
}, 
'2': { 
'display': 'none' 
}, 
'3': { 
'display': 'none' 
} 
}); 
} 
// 這里我們?yōu)槊總€內(nèi)容區(qū)塊創(chuàng)建一個函數(shù) 
var showFunctionOne = function() { 
// 首先，調(diào)用函數(shù)hideAll 
// 然后Fx.element對象的引用“this”作為參數(shù)傳入 
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() { 
// 建立一個數(shù)組來保存Fx.elements 
var morphElements = $$('.hiddenMel'); 
// 創(chuàng)建一個新的Fx.Element對象 
var elementEffects = new Fx.Elements(morphElements, { 
// 設(shè)置"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注：這個意思就是說，這一系列的教程中，覆蓋的內(nèi)容還不夠全面，因此強烈建議大家仔細閱讀全部文檔。）

下載最后一個示例的代碼

也包含你開始實踐所需要的所有東西。