搜尋

隨機推薦

23 十一月 2010
22 十一月 2011

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 教學列表:


 

廣告

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

Please publish modules in offcanvas position.