Mootools 1.2教程 選項(xiàng)卡效果（Tabs）
更新時(shí)間：2009年09月15日 22:36:18 作者：
今天將不只是受限于這個(gè)庫和一些基本的編程知識(shí)，我們來做一個(gè)簡單的小項(xiàng)目。通過使用我們目前為止已經(jīng)學(xué)過的一些知識(shí)，有幾種方式來創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時(shí)顯示相應(yīng)內(nèi)容的tab。
簡單的“額外信息”標(biāo)簽（TAB）
鼠標(biāo)移上去顯示內(nèi)容的TAB
在這第一個(gè)項(xiàng)目中，我們要?jiǎng)?chuàng)建一個(gè)簡單的菜單，當(dāng)鼠標(biāo)移動(dòng)到這些菜單上時(shí)顯示相應(yīng)的內(nèi)容。首先，我們來完成HTML代碼——我們就用包含四個(gè)列表項(xiàng)的ul好了，然后再創(chuàng)建四個(gè)div（每一個(gè)div對(duì)應(yīng)一個(gè)列表項(xiàng)）：
參考代碼：
// 這里是我們的菜單
<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ū)塊隱藏起來：
參考代碼： [復(fù)制代碼] [保存代碼]
.hidden {
display: none;
}
好了，現(xiàn)在開始寫MooTools代碼。如果我們需要當(dāng)用戶把鼠標(biāo)移上去的時(shí)候顯示內(nèi)容，當(dāng)鼠標(biāo)離開的時(shí)候隱藏內(nèi)容，我們需要完成這樣兩個(gè)函數(shù)：
參考代碼：
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
還有一些事件：
參考代碼：
window.addEvent('domready', function() {
// 這里我們可以把容器元素賦值給一個(gè)變量
var elOne = $('contentone');
$('one').addEvents({
// 當(dāng)鼠標(biāo)進(jìn)入的時(shí)候，我們調(diào)用showFunction
// 并綁定這個(gè)元素elOne
// 因此我們需要把它作為函數(shù)參數(shù)
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
});
現(xiàn)在，我們只需要為每個(gè)tab重復(fù)這個(gè)模式，并指定對(duì)應(yīng)的內(nèi)容區(qū)塊就可以了。下面是完整的代碼：
參考代碼： [復(fù)制代碼] [保存代碼]
// 這里是用來改變樣式的函數(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ù)綁定相應(yīng)的變量
'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)
});
});
正如你所看到的，這一切看起來都非常的熟悉，完成這些并不需要任何我們目前為止沒有學(xué)過的東西。
One
Two
Three
Four
content for one
content for two
content for three
content for four
點(diǎn)擊時(shí)顯示內(nèi)容的TAB
借鑒上面的想法，我們可以很輕松地調(diào)整它為點(diǎn)擊時(shí)顯示內(nèi)容。我們就使用上面的HTML，然后修改一下MooTools代碼，以完成點(diǎn)擊事件。
首先，我們需要調(diào)整一下我們的函數(shù)。由于我們不能在鼠標(biāo)離開時(shí)把內(nèi)容隱藏起來，因此，我們需要換一種方式來切換這些div?？赡茏钊菀椎倪x擇是在點(diǎn)擊時(shí)首先把它們?nèi)侩[藏起來，然后只把this（通過click事件傳遞進(jìn)來的對(duì)象）所指的當(dāng)前的內(nèi)容顯示出來。
參考代碼：
var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none');
this.setStyle('display', 'block');
}
現(xiàn)在，當(dāng)我們通過把元素綁定到一個(gè)函數(shù)上來傳遞這個(gè)變量時(shí)，它將隱藏其他的區(qū)塊，并顯示當(dāng)前的區(qū)塊。
接下來，我們還需要調(diào)整一下我們的事件。首先，我們只需要一個(gè)事件了，因此我們使用.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)容塊加上形變
通過擴(kuò)展我們上面的代碼，我們可以添加一些形變效果來顯示我們隱藏的內(nèi)容區(qū)塊。首先，我們可以像以前那樣創(chuàng)建一個(gè)Fx.Morph效果，不過在這里要設(shè)置不同的樣式。當(dāng)然，我們還需要?jiǎng)?chuàng)建我們的形變（Morph）對(duì)象：
參考代碼：
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)建一個(gè)形變對(duì)象
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
注意：如果你快速地點(diǎn)擊上面的示例，你將看的會(huì)同時(shí)出現(xiàn)多個(gè)內(nèi)容區(qū)塊。從根本上講，如果showFunction在上一個(gè)形變完成之前調(diào)用，它將不會(huì)隱藏其他的區(qū)塊內(nèi)容。要解決這個(gè)問題，我們需要打破這一規(guī)則，并充分利用Fx.Elements。
代碼示例
下面的這個(gè)示例和上面的示例差不多，不過當(dāng)你快速地點(diǎn)擊兩個(gè)tab時(shí)，將不會(huì)同時(shí)出現(xiàn)多個(gè)內(nèi)容div。
參考代碼：
// 創(chuàng)建一個(gè)隱藏所有元素的函數(shù)
// 你可以把元素作為參數(shù)傳遞進(jìn)來
var hideAll = function(fxElementObject){
fxElementObject.set({
'0': {
'display': 'none'
},
'1': {
'display': 'none'
},
'2': {
'display': 'none'
},
'3': {
'display': 'none'
}
});
}
// 這里我們?yōu)槊總€(gè)內(nèi)容區(qū)塊創(chuàng)建一個(gè)函數(shù)
var showFunctionOne = function() {
// 首先，調(diào)用函數(shù)hideAll
// 然后Fx.element對(duì)象的引用“this”作為參數(shù)傳入
hideAll(this);
// 開始相應(yīng)元素的Fx.element形變動(dòng)畫
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() {
// 建立一個(gè)數(shù)組來保存Fx.elements
var morphElements = $$('.hiddenMel');
// 創(chuàng)建一個(gè)新的Fx.Element對(duì)象
var elementEffects = new Fx.Elements(morphElements, {
// 設(shè)置"link"選項(xiàng)的值為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));
});
更多學(xué)習(xí)
這篇教程更多地是復(fù)習(xí)和應(yīng)用我們?cè)谝郧暗慕坛讨袑W(xué)些的東西。因此，如果你還么準(zhǔn)備好，我們建議你全面閱讀相應(yīng)的文檔。這比聽起來的會(huì)更有趣。如果你是剛接觸這個(gè)庫的，但是一直在學(xué)習(xí)這一系列的教程，你可能會(huì)對(duì)你了解的程度非常的驚訝。（Fdream注：這個(gè)意思就是說，這一系列的教程中，覆蓋的內(nèi)容還不夠全面，因此強(qiáng)烈建議大家仔細(xì)閱讀全部文檔。）
鼠標(biāo)移上去顯示內(nèi)容的TAB
在這第一個(gè)項(xiàng)目中，我們要?jiǎng)?chuàng)建一個(gè)簡單的菜單，當(dāng)鼠標(biāo)移動(dòng)到這些菜單上時(shí)顯示相應(yīng)的內(nèi)容。首先，我們來完成HTML代碼——我們就用包含四個(gè)列表項(xiàng)的ul好了，然后再創(chuàng)建四個(gè)div（每一個(gè)div對(duì)應(yīng)一個(gè)列表項(xiàng)）：
參考代碼：
復(fù)制代碼 代碼如下:
// 這里是我們的菜單
<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ū)塊隱藏起來：
參考代碼： [復(fù)制代碼] [保存代碼]
.hidden {
display: none;
}
好了，現(xiàn)在開始寫MooTools代碼。如果我們需要當(dāng)用戶把鼠標(biāo)移上去的時(shí)候顯示內(nèi)容，當(dāng)鼠標(biāo)離開的時(shí)候隱藏內(nèi)容，我們需要完成這樣兩個(gè)函數(shù)：
參考代碼：
復(fù)制代碼 代碼如下:
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
還有一些事件：
參考代碼：
復(fù)制代碼 代碼如下:
window.addEvent('domready', function() {
// 這里我們可以把容器元素賦值給一個(gè)變量
var elOne = $('contentone');
$('one').addEvents({
// 當(dāng)鼠標(biāo)進(jìn)入的時(shí)候，我們調(diào)用showFunction
// 并綁定這個(gè)元素elOne
// 因此我們需要把它作為函數(shù)參數(shù)
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
});
現(xiàn)在，我們只需要為每個(gè)tab重復(fù)這個(gè)模式，并指定對(duì)應(yīng)的內(nèi)容區(qū)塊就可以了。下面是完整的代碼：
參考代碼： [復(fù)制代碼] [保存代碼]
// 這里是用來改變樣式的函數(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ù)綁定相應(yīng)的變量
'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)
});
});
正如你所看到的，這一切看起來都非常的熟悉，完成這些并不需要任何我們目前為止沒有學(xué)過的東西。
One
Two
Three
Four
content for one
content for two
content for three
content for four
點(diǎn)擊時(shí)顯示內(nèi)容的TAB
借鑒上面的想法，我們可以很輕松地調(diào)整它為點(diǎn)擊時(shí)顯示內(nèi)容。我們就使用上面的HTML，然后修改一下MooTools代碼，以完成點(diǎn)擊事件。
首先，我們需要調(diào)整一下我們的函數(shù)。由于我們不能在鼠標(biāo)離開時(shí)把內(nèi)容隱藏起來，因此，我們需要換一種方式來切換這些div?？赡茏钊菀椎倪x擇是在點(diǎn)擊時(shí)首先把它們?nèi)侩[藏起來，然后只把this（通過click事件傳遞進(jìn)來的對(duì)象）所指的當(dāng)前的內(nèi)容顯示出來。
參考代碼：
復(fù)制代碼 代碼如下:
var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none');
this.setStyle('display', 'block');
}
現(xiàn)在，當(dāng)我們通過把元素綁定到一個(gè)函數(shù)上來傳遞這個(gè)變量時(shí)，它將隱藏其他的區(qū)塊，并顯示當(dāng)前的區(qū)塊。
接下來，我們還需要調(diào)整一下我們的事件。首先，我們只需要一個(gè)事件了，因此我們使用.addEvent();方法，然后還需要改變事件的類型為“click”。
參考代碼：
復(fù)制代碼 代碼如下:
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)容塊加上形變
通過擴(kuò)展我們上面的代碼，我們可以添加一些形變效果來顯示我們隱藏的內(nèi)容區(qū)塊。首先，我們可以像以前那樣創(chuàng)建一個(gè)Fx.Morph效果，不過在這里要設(shè)置不同的樣式。當(dāng)然，我們還需要?jiǎng)?chuàng)建我們的形變（Morph）對(duì)象：
參考代碼：
復(fù)制代碼 代碼如下:
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)建一個(gè)形變對(duì)象
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
注意：如果你快速地點(diǎn)擊上面的示例，你將看的會(huì)同時(shí)出現(xiàn)多個(gè)內(nèi)容區(qū)塊。從根本上講，如果showFunction在上一個(gè)形變完成之前調(diào)用，它將不會(huì)隱藏其他的區(qū)塊內(nèi)容。要解決這個(gè)問題，我們需要打破這一規(guī)則，并充分利用Fx.Elements。
代碼示例
下面的這個(gè)示例和上面的示例差不多，不過當(dāng)你快速地點(diǎn)擊兩個(gè)tab時(shí)，將不會(huì)同時(shí)出現(xiàn)多個(gè)內(nèi)容div。
參考代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個(gè)隱藏所有元素的函數(shù)
// 你可以把元素作為參數(shù)傳遞進(jìn)來
var hideAll = function(fxElementObject){
fxElementObject.set({
'0': {
'display': 'none'
},
'1': {
'display': 'none'
},
'2': {
'display': 'none'
},
'3': {
'display': 'none'
}
});
}
// 這里我們?yōu)槊總€(gè)內(nèi)容區(qū)塊創(chuàng)建一個(gè)函數(shù)
var showFunctionOne = function() {
// 首先，調(diào)用函數(shù)hideAll
// 然后Fx.element對(duì)象的引用“this”作為參數(shù)傳入
hideAll(this);
// 開始相應(yīng)元素的Fx.element形變動(dòng)畫
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() {
// 建立一個(gè)數(shù)組來保存Fx.elements
var morphElements = $$('.hiddenMel');
// 創(chuàng)建一個(gè)新的Fx.Element對(duì)象
var elementEffects = new Fx.Elements(morphElements, {
// 設(shè)置"link"選項(xiàng)的值為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));
});
更多學(xué)習(xí)
這篇教程更多地是復(fù)習(xí)和應(yīng)用我們?cè)谝郧暗慕坛讨袑W(xué)些的東西。因此，如果你還么準(zhǔn)備好，我們建議你全面閱讀相應(yīng)的文檔。這比聽起來的會(huì)更有趣。如果你是剛接觸這個(gè)庫的，但是一直在學(xué)習(xí)這一系列的教程，你可能會(huì)對(duì)你了解的程度非常的驚訝。（Fdream注：這個(gè)意思就是說，這一系列的教程中，覆蓋的內(nèi)容還不夠全面，因此強(qiáng)烈建議大家仔細(xì)閱讀全部文檔。）
也包含你開始實(shí)踐所需要的所有東西。
相關(guān)文章
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集，學(xué)習(xí)mootools的朋友可以參考，非常不錯(cuò)的效果。2010-05-05
Mootools 1.2教程 選項(xiàng)卡效果（Tabs）
今天將不只是受限于這個(gè)庫和一些基本的編程知識(shí)，我們來做一個(gè)簡單的小項(xiàng)目。通過使用我們目前為止已經(jīng)學(xué)過的一些知識(shí)，有幾種方式來創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時(shí)顯示相應(yīng)內(nèi)容的tab。2009-09-09
Mootools 1.2教程 Fx.Morph、Fx選項(xiàng)和Fx事件
今天，我們繼續(xù)探索一下這個(gè)庫的Fx部分2009-09-09
這幾天, 利用晚上的閑暇時(shí)間, 寫了個(gè)mootools組件,原型來自于jQuery UI Dialog, 為防止重復(fù),就起了名字叫mooBox.2012-01-01
有人最近要求我們寫一個(gè)關(guān)于MooTools 1.2的30天的教程，這似乎也是個(gè)很不錯(cuò)的主意，于是我們決定現(xiàn)在就開始。在這些教程中，我們假設(shè)用戶沒有任何MooTools或者是JavaScript經(jīng)驗(yàn)，但是至少有基本的HTML和CSS知識(shí)。2009-09-09
使用Mootools動(dòng)態(tài)添加Css樣式表代碼,兼容各瀏覽器
這個(gè)函數(shù)很有用處,尤其是當(dāng)我們?cè)谑褂肕ootools開發(fā)插件的時(shí)候,例如Tips等,當(dāng)我們需要額外的Css來支撐插件內(nèi)的效果時(shí),通常我們的做法是把Css放到單獨(dú)的css文件里調(diào)用2011-12-12
MooTools 1.2中的Drag.Move來實(shí)現(xiàn)拖放
今天我們開始第十二講，今天我們將仔細(xì)看一下Drag.Move——一個(gè)很強(qiáng)大的MooTools類，它可以讓你給你的web應(yīng)用添加拖放功能。2009-09-09
Mootools 1.2教程 滾動(dòng)條（Slider）
到現(xiàn)在為止，初始化這些MooTools插件對(duì)象就會(huì)開始變得越來越熟悉。滾動(dòng)條（Slider）沒有任何不同，你要?jiǎng)?chuàng)建一個(gè)新的滾動(dòng)條，定義滾動(dòng)條和滑塊相關(guān)的元素，然后設(shè)置你的選項(xiàng)，再創(chuàng)建一些回調(diào)事件的控制函數(shù)。2009-09-09
一些mootools的學(xué)習(xí)資源，學(xué)習(xí)mootools的朋友可以參考下。2010-02-02
在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中，我們介紹了一下選擇器，其中有很多方法就會(huì)返回?cái)?shù)組（一個(gè)你可以對(duì)其中內(nèi)容進(jìn)行多種操作的特殊列表）。2009-09-09