DIV CSS 佈局教程網

有人最近要求我們寫一個關於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核心庫

1. <script src="mootools-1.2-core.js” type="text/javascript"></script>

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

在Head標簽之內添加Script標簽

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

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

1. <script type="text/javascript">
2. //Mootools code goes here
3. </script>

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

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

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

把代碼放在domready中

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

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

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

把代碼放在一個函數中

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

1. var exampleFunction = function() {
2.      alert('hello')
3. };
4.  
5. window.addEvent('domready', function() {
6.     exampleFunction();
7. });

關於庫的詳細介紹

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

Core（核心）

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