Menu

30天學會 MooTools 教學(1): 認識MooTools

有人最近要求我們寫一個關於MooTools 1.2的30天的教程，這似乎也是個很不錯的主意，於是我們決定現在就開始。在這些教程中，我們假設用戶沒有任何MooTools或者是JavaScript經驗，但是至少有基本的HTML和CSS知識。

MooTools 1.2 JavaScript庫介紹

MooTools 1.2是 個強大的輕量級的JavaScript庫，專門為減輕Web中交互性JavaScript開發。在某種程度上，你可以認為MooTools是CSS的擴 展。例如，CSS可以讓你在鼠標移上去時發生改變。JavaScript允許你接觸更多的時間（點擊事件、鼠標懸停事件、鍵盤事 件……），MooTools讓這一切變得非常容易。

另外，MooTools還有各種各樣的非常好的擴展，可以讓你不只是改變一個元素的屬性，還可以讓你有」morph「（變形）或者」tween「（補間動畫）屬性，讓你有能力去創建動畫效果，就像你在我的導航菜單上看到的一樣（Fdream註：原作者的，我的首頁也有）。

這只是一個例子，MooTools可以讓你做更多的事情。在接下來的30天裡，我們將深入MooTools庫，探索從數組（Array）和函數（Function）到Fx.Slide，以及其他捆綁插件的每一個東西。

引用MooTools 1.2

首先，下載並引用MooTools 1.2核心庫。

  • 下載MooTools 1.2核心庫
  • 把MooTools 1.2核心庫上傳到你的服務器或者工作區
  • 在你的HTML文檔頭部head標記之內鏈接MooTools 1.2核心庫 
<script src="mootools-1.2-core.js」 type="text/javascript"></script>

（Fdream註：現在MooTools 1.2下載下來後，默認的後綴名是」.txt「，請更改後綴為」.js「。）

在Head標籤之內添加Script標籤

現在，你已經在你的頁面中應用了了MooTools了，你還需要一個地方來寫你的代碼。這裡有兩種選擇：

1. 把下面的代碼寫在你的head標籤之內，你的代碼寫在script標記之內： 

<script type="text/javascript">
//Mootools code goes here
</script>

2. 在外部建立一個JavaScript文件，然後在頁面頭部鏈接此文件： 

<script src="myJavaScriptFile.js" type="text/javascript"></script>

在這裡，你可以使用任何一種方式。我通常把domready事件中調用的方法放在script標記之間，而我的函數放在外部文件中。

把代碼放在domready中

MooTools的方法必須在domready事件中調用。 

window.addEvent('domready', function() {
    exampleFunction();
});

（Fdream註：不完全是這樣，但是可以保證你的JavaScript代碼儘可能少地出錯。順便說一下domready事件：當頁面的HTML代 碼（不包括圖片、flash等等，只是代碼）下載完成時，此時會觸發domready事件。這樣可以在頁面完全下載完成（包括圖片、flash等都下載完 成）之前執行你的腳本，從而避免因為一張大圖要下很長時間而導致腳本不能執行，從而出現異常。）

把代碼放在一個函數中

你仍然可以在domready之外創建你的函數，然後在domready中調用它： 

var exampleFunction = function() {
     alert('hello')
};
 
window.addEvent('domready', function() {
    exampleFunction();
});

關於庫的詳細介紹

在這第一講中，我們會仔細地看了一下這個庫架構的一些關鍵組件，然後粗略地看一下其他基本功能。

Core（核心）

核心（core）部分包含MooTools庫的一些公共函數（Function）來完成一些常見的任務，也加強了許多原有功能（後面會有詳細介紹）。下面的內容只是作為MooTools功能的一些例子，並不能替代您閱讀MooTools的文檔。

（Fdream註：第一個描述有誤，$chk(value)只是檢查一個值是不是已經定義或者已經賦值，為0時會返回true，只有undefined或者null時返回false。）

Native（本地對象）

在庫的這一部分也包含了一些公共工具，可以讓你很容易地操作數組（Array，值或者對象的簡單列表）、函數（Function）、數值（Number）、字符串（String）、哈希對象（Hash）和事件（Event）。這裡是本地對象中的一些工具特性：

  • 對數組中的每個元素執行一段腳本 - .each();
  • 得到數組中的最後一個元素 - .getLast();
  • 每個x毫秒觸發一個事件 - .periodical();
  • 對小數取整 - .round();
  • 把rgb轉換為十六進制（HEX） - .rgbToHex();

Class（類）

一個JavaScript類（相對於CSS的類），是一個功能可以重複使用的對象。若要更多地瞭解MooTools類，你可以看看Valerio的這篇簡單介紹的文章（MooTools類——怎樣使用它們）。我也同時推薦David Walsh的MooTools類模板。

Element（元素）

MooTools庫的Element類提供了一些非常有用的功能。通過這個類，你可以選擇DOM元素、操控他們的屬性和位置、改變他們的CSS風格。這裡是MooTools提供的一些非常強大的處理DOM元素的工具：

  • 選擇所有有相同ID或者CSS類名的DOM元素 - .getElements();
  • 給一個元素添加一個CSS類 - .addClass();
  • 取得一個元素的屬性值 - .getProperty();
  • 改變一個元素的屬性值 - .setProperty();
  • 取得一個元素的樣式屬性值 - .getStyle();
  • 改變一個元素的樣式屬性值 - .setStyle();
  • 取得一個元素的坐標位置 - .getCoordinates();

（Fdream註：不推薦在一個頁面中有多個相同ID，最好不要出現，在一些瀏覽器下很容易出現不可預見的錯誤。）

Utilities（實用工具）

實用工具（Utilities）提供了更多精良的選擇邏輯，包括domready事件、可以管理AJAX調用的工具、可以輕鬆管理cookie的工具，甚至還有」swiff「功能，可以提供JavaScript接口給ActionScript。

FX（效果）

這可能是MooTools最有趣的部分了。通過Fx（效果），你可以創建」Tween「（補間動畫）和」morph「（形變動畫）效果，從而讓你的DOM對象動起來。

  • 在兩個樣式屬性值之間創建一個動畫變形（比如讓一個div平緩地變大） - var myFx = new Fx.Tween(element);
  • 在多個不同的屬性值之間創建一個動畫變形（比如在讓一個div平緩變大的過程中，讓它的邊框越來越初，同時變換它的背景顏色） - var myFx = new Fx.Morph(element);

Request（請求）

包含一些可以輕鬆處理JavaScript XMLHttpRequest（AJAX）功能的工具。為了減輕整個請求/響應（request/response）帶來的痛苦，Request對象還有一些專門用來處理HTML和JSON對象（JavaScript對象表示法）的擴展。

Plugins（插件）

MooTools插件擴展了核心功能，可以輕鬆地為你的web項目添加高級UI功能。插件列表如下：

  • Fx.Slide
  • Fx.Scroll
  • Fx.Elements
  • Drag
  • Drag.Move
  • Color
  • Group
  • Hash.Cookie
  • Sortables
  • Tips
  • SmoothScroll
  • Slider
  • Scroller
  • Assets
  • Accordion

全局概覽

在開始下一講之前，花一點時間全面地看一下MooTools的文檔。可能有些地方你看不太懂，不要管它，儘管通讀它，然後吸收那些你懂的。在接下來 的29天中，我們將逐步深入這個庫特定的部分，然後把MooTools分解成一些容易消化的小部分，但是首先，一定要好好看一下整個目錄。

更多學習

一個壓縮包，包含了你開始起步所需要的所有東西

包括一個MooTools 1.2核心庫、一個簡單的HTML文件、一個用來寫你的函數的外部的JavaScript文件、一個CSS樣式表文件。這個HTML文件已經已經寫了詳細的註釋，并包含有domready事件。

其他的MooTools教程

同時，這裡列出了一些其他幫助你開始的的MooTools教程。

MooTools 1.2 備忘錄

這裡是一份很好的MooTools 1.2功能的歸納表，我才給自己打印了一份，正在找地方把它給掛起來。也許我應該順便拜訪一下打印機，然後讓它們給我提供一張海報大小的：）。不管怎樣，這裡是MooTools 1.2備忘錄的鏈接。

Mootools論壇

如果你想和其他人討論MooTools，檢查代碼示例或者深入討論某個問題，你可以來這裡。這才剛剛開張，但是正在逐漸熱起來：MooTools 1.2論壇。

 


Mootools 教學列表：