Mootools 1.2教程

Mootools 1.2教程 選項卡效果(Tabs)

时间:2015-07-13 19:32来源:网络整理 作者:KKWL 点击:
簡單的“額外信息”標籤(TAB) 鼠標移上去顯示內容的TAB 在這第一個項目中,我們要創建一個簡單的菜單,當鼠標移動到這些菜單上時顯示相應的內容。首先,我們來完成HTML 代碼 —


簡單的“額外信息”標籤(TAB)
鼠標移上去顯示內容的TAB
在這第一個項目中,我們要創建一個簡單的菜單,當鼠標移動到這些菜單上時顯示相應的內容。首先,我們來完成HTML代碼——我們就用包含四個列表項的ul好了,然後再創建四個div(每一個div對應一個列表項):
參考代碼:

複製代碼 代碼如下:

// 這裡是我們的菜單
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
// 這裡是我們的內容div
<div>content for one</div>
<div>content for two</div>
<div>content for three</div>
<div>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));
});

------分隔线----------------------------