搜尋

隨機推薦

24 十二月 2010
06 一月 2010
25 十二月 2010

30天學會 MooTools 教學(20): Tab 標籤頁

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

 

廣告

 

簡單的「額外信息」標籤(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>

現在,我們不需要關心怎麼把它們做得漂亮。在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)
});


正如你所看到的,這一切看起來都非常的熟悉,完成這些並不需要任何我們目前為止沒有學過的東西。

借鑑上面的想法,我們可以很輕鬆地調整它為點擊時顯示內容。我們就使用上面的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));


給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));


注意:如果你快速地點擊上面的示例,你將看的會同時出現多個內容區塊。從根本上講,如果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註:這個意思就是說,這一系列的教程中,覆蓋的內容還不夠全面,因此強烈建議大家仔細閱讀全部文檔。)

遠程下載:下載最後一個示例的代碼 (44.44 KB)

 

Mootools 教學列表:

 

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.