Menu

超過 50 個國外 Mootools 教學大集合

MooTools教程
MooTools這個JavaScript框架越來越流行了介紹幾個MooTools的入門教程。
MooTools入門教程
mootootls元素屬性
MooTools類介紹使用

MooTools 入門教程：選擇和創建元素
這是一篇面向初學者的MooTools 入門教程，他介紹了選擇和創建元素的方法。
瀏覽教程：　A beginner's MooTools – select and create elements
MooTools 官方的文檔與演示
MooTools Docs(最新英文版)
MooTools文檔中文版V1.2
MooTools Demos
30天學會MooTools系列教程
這個30天學會MooTools系列教程，列出了各個方面的MooTools學習內容還差幾個構成30個教程。
框架簡介
選擇器
使用數組介紹
Functions 函數
事件處理
操作的HTML
設置和獲取樣式屬性
輸入過濾第一部分-數字
輸入過濾第二部分-字符
使用FX.Tween
介紹 Fx.Morph, Fx Options 和Fx Events
使用Drag.Move拖放
正則表達式
週期和介紹哈希值
幻燈效果
介紹排序方法
手風琴效果
類第I部分
工具提示
幾個MooTools標籤
類 II部分
Fx.Elements
Fx.Slide
中文譯本網址：MooTools 1.2系列教程目錄。
MooTools模仿Facebook對話框
這篇教程使用MooTools在Facebook常見的一個對話框效果，在開心網也有這個對話框效果。
瀏覽教程：Facebook modal box
使用MooTools自定義缺失圖片
這篇教程是關於使用MooTools創建一個效果：當圖片不顯示的時候使用自定義圖片替換。
瀏覽教程： Using custom missing image graphics
MooTools 發送電子郵件通知
這是一篇關於如何在顯示圖像的時候出現中斷之後，使用Ajax和PHP來發送的電子郵件通知，使用了MooTools框架創建這個效果。
瀏覽教程： Sending Email notifications for broken images
Skype樣式安鈕
這篇教程使用了MooTools創建一個Skype樣式安鈕效果。
瀏覽教程： Skype-style buttons
MooTools 創建手電筒效果
這篇教程使用了MooTools框架來模擬一個手電筒效果，背景使用的暗淡的場景，鼠標是手電筒光源。
瀏覽教程： MooTools Flashlight effect
使用MooTools創建Snook樣式動畫導航
這個教程講述了一個使用MooTools創建動畫導航導航效果，這個效果 使鼠標在導航上的時候背景圖片出現波浪等動畫效果，他是Using jQuery for Background Image Animations的MooTools版本。
瀏覽教程： Create Snook-Style Navigation Using MooTools
MooTools分解載入Ajax頁面效果
這個教程介紹一個有趣的效果，它是由MooTools創建的，顯示了一個原有頁面文字分解，然後載入新的Ajax頁面的動畫效果。
瀏覽教程： Explode effect on Ajax page loads
cookie保存字體大小滑塊
文章介紹了使用MooTools框架創建的JavaScript一個使用cookie來保存滑塊設置的字體大小的教程。這個效果使用了滑塊動畫來設置字體大小，並且在設置好後自動保存信息到cookie中去。
瀏覽教程： Font-Size scroller with Cookie save
使用谷歌分析跟蹤Ajax鏈接點擊
這篇教程使用MooTools和谷歌分析就是統計工具來創建了一個跟蹤Ajax鏈接點擊的方法。
瀏覽教程：　Track Ajax link clicks using Google Analytics
使用MooTools設置Ajax更新週期
這篇教程介紹一個使用MooTools框架進行ajax通信的時候使用periodical函數設置Ajax的更新週期，教程中設置的週期是5秒。
瀏覽教程： Periodicar Ajax updates using MooTools

MooTools 模擬flash水平導航
這篇教程介紹使用MooTools 創建一個網頁中常用到的模擬flash水平導航效果。
瀏覽教程： Simulate Flash horizontal navigation
MooTools產品高亮效果
文章介紹了一個詳細的教程使用MooTools創建的鼠標移動到對應項目是顯示提示相關信息的產品高亮效果教程。
瀏覽教程：Product Highlighter
MooTools 自動提取圖片標題
這篇文章介紹了使用MooTools自動提取圖片的title屬性作為該圖片的標題。
瀏覽教程：Auto caption images
MooTools toElement 方法
toElement 方法是MooTools常用的一個方法，這篇文章介紹了toElement 方法的用法，它可以添加類或對象。
瀏覽教程：toElement method
MooTools outerClick事件
這篇教程介紹了一個使用MooTools創建的新事件類型，outerClick事件鼠標點擊事件。瀏覽教程： outerClick event
MooTools 文件保存列表
這篇文章介紹了個使用MooTools和php創建的文件保存列表，可以自定義添加文章的目錄，使用Ajax實現的這個功能的教程。瀏覽教程： Saving a sortalbe nested list
MooTools CSS sprites（css精靈)實現
CSS sprites（css精靈)是在網頁製作中將圖片合併並使用css設置背景圖，這篇文章介紹了使用MooTools實現CSS sprites（css精靈)動畫效果的教程。
瀏覽教程： CSS sprites with MooTools
MooTools Swiff 類
Swiff是MooTools的一個工具類，它能夠使用JavaScript創建flash在網頁中，並且能夠使JavaScript和flash進行變量通信。
官方網址：Swiff
使用CSS和MooTools 使sIFR應用於打印效果
sIFR是一種姿態替換的方法，可以使瀏覽器沒有的字體替換，一般是在屏幕顯示的，這篇文章介紹了使用CSS和MooTools代碼將sIFR字體替換效果應用於打印預覽時的字體。
瀏覽教程： Fixing sIFR printing with CSS and MooTools
MooTools自定義事件
這篇文章介紹了使用MooTools實現自定義事件的方法，實現了一個alt+鼠標點擊的事件。
瀏覽教程： Custom Events
MooTools元素存儲
教程講述了MooTools開發中關於元素存儲的方法，使用了一個覆蓋方法，更改屬性。
瀏覽文章：　Element Storage
MooTools鏈Chain教程
文章介紹了使用MooTools實現鏈Chain的教程。
瀏覽教程： Chaining with MooTools
MooTools為媒介設置css樣式
教程提供了一個方法為不同的媒體設置不同的css樣式，使用MooTools構建的。
瀏覽文章： Set style per media
MooTools自定義選中類
這篇文章是一個使用MooTools創建的自定義選中類，自定義了一個選中類的效果
演示例子： demo
瀏覽教程： Creating a custom 「:selected」 pseudo-class in MooTools
MooTools鼠標教程
這篇教程使用MooTools開發了一個使用JavaScript控制記錄鼠標剛才的動作的代碼。
瀏覽教程：The Mouse Ghost
5個 MooTools 開發高級技術
文章介紹了5個在使用MooTools框架開發程序的高級技術。包括有：使用Class.toElement 和 $、使用元素存儲地址、閉包方法使用等開發時比高級的技術。
瀏覽教程： 5 Advanced techniques for MooTools development
MooTools代碼重用性
這篇教程介紹了在使用MooTools開發程序的時候代碼重用性問題，自調用函數、使用擴展的方法實現代碼重用性。
瀏覽教程：Don't repeat your Moo
MooTools單態類教程
這篇文章介紹了實現在MooTools中的單態類（Singleton Class）的方法，是oop面向對象編程的常見問題。
瀏覽教程： MooTools Singleton Class Mutator .....
MooTools定義私有方法
這是關於在MooTools框架中定義私有方法的教程，這也是oop面向對象編程常見的問題。
瀏覽教程： Private methods in MooTools
MooTools綁定類
這篇文章介紹了在MooTools中實現綁定類的方法，這個是oop常見的問題。
瀏覽教程：Class.Binds for MooTools is Back
SmoothScroll：MooTools窗口頁面滾動插件
SmoothScroll是一個基於MooTools的窗口頁面滾動插件可以點擊鏈接實現頁面滾動效果。
演示地址：View Dem
代碼地址：SmoothScroll
Kroppr：MooTools圖片切割效果
Kroppr是一個基於MooTools的圖片切割效果的插件。
官方網址：Kroppr
mooSocialize：MooTools社會化按鈕
mooSocialize是基於MooTools創建的一個社會化按鈕小工具，效果非常漂亮。
官方地址：mooSocialize
MooTools事 鍵日曆插   件
這個是用MooTools創建的顯示事件 信息的日 歷插 件。
地址：http://dansnetwork.com/MooTools/events-calendar/
Pamoorama
Pamoorama是一個MooTools插件，他創建一個容器div，使用戶能夠通過滾動包含圖片 以橫向滾動顯示一個全景圖像。
官方網址：Pamoorama
演示例子：
Sample 1
Sample 2
Sample 3
Slider：MooTools滑動塊插件
Slider是一個MooTools滑動塊插件，實現常見的類似橫向滑動條效果。
官方網址：Slider
SortableTable ：MooTools表單插件
SortableTable可以實現表單排序、按條件過濾表單數據的效果，他是基於MooTools的表單插件。
官方地址： SortableTable
MooWheel：MooTools可視元素關係插件
MooWheel是一個用MooTools創建的可視元素關係插件。
官方網址： MooWheel
演示地址： larger, AJAX-powered demo
Moosture ：MooTools鼠標手勢插件
Moosture 實現了模擬鼠標手勢的效果，很有趣，是由MooTools框架開發的插件.
官方網址： Moosture .
inlineEdit:MooTools 行編輯插件
inlineEdit 實現了一個編輯行代碼的效果，在點擊行文字的時候變成編輯框的MooTools工具。MooTools 行編輯插件。
官方網站： inlineEdit
MooTools導航菜單插件
介紹幾個基於MooTools的導航菜單插件
Image Menu 是一個圖片切換導航MooTools菜單。
Sexy sliding JavaScript side bar menu 是邊欄導航條MooTools菜單。
MooFlow 是圖片幻燈導航MooTools插件。
Simple 3D Carousel 3d導航效果MooTools插件。
MooHover 是鼠標選定菜單MooTools插件。
mooRainbow：MooTools調色板工具
mooRainbow使用MooTools實現了實用的調色板效果工具。
官方網址： mooRainbow
Rounded Corners：MooTools圓角工具
Rounded Corners 是一個MooTools框架實現的圓角生成工具.能夠在div上創建圓角效果，可以實現css3的圓角矩形效果。
官方網址：Rounded Corners
Reflection:MooTools圖片倒影插件
Reflection圖片倒影效果工具，它是基於MooTools的實現了一個,使用代碼生成圖片倒影的效果。
官方網址：Reflection
MooColumns：MooTools多列工具
MooColumns是一個MooTools的動態多列工具類。
官方網站： MooColumns
MooScroll：mootool滾動條插件
MooScroll是一個基於mootool框架創建的滾動條插件，實現了一個自定義滾動條效果.
官方網站：MooScroll
RabidRatings 基於MooTools,PHP的星級評比插件
使用MooTools與PHP開發的一個簡單，易用的評價控件，最新版為RabidRatings v1.4.2。
官方網站：RabidRatings v1.4.2
Window.Growl 2.0 淡入淡出的信息提示效果
Growl基於MooTools開發，它可以讓你創建淡入淡出的提示信息效果。
官方網站：Window.Growl 2.0
MooTools工具提示插件
介紹三個基於MooTools工具提示插件：
Window Growl 是模擬Mac OS系統的提示效果的MooTools工具提示插件。
Tips 是又MooTools工具提示插件，演示地址：DEMO 。
MooTooltips 可以加載Ajax提示效果工具提示。
FormCheck：MooTools表單檢測插件
FormCheck：是一個MooTools框架開發的表單檢測插件，可以實現定義表單驗證規則 。
官方網址：FormCheck
Calendar:MooTools日曆插件
Calendar是一個基於MooTools的日曆插件，功能簡單，用於創建日期選擇器。
官方網址：Calendar
vlaCalendar 日曆插件
Vista-like Ajax Calendar (vlaCalendar) 是Windows Vista任務欄日曆的一個Web實現．採用MooTools Javascript框架開發。
官方網址：vlaCalendar
Fancy MooTools Date Picker簡單實用的日曆插件
Fancy MooTools Date Picker 簡單實用的日曆插件，基於MooTools開發的，參數設置非常明了。
官方網址：Fancy MooTools Date Picker
Validate：MooTools驗證插件
Validate：是一個簡單的表單驗證插件。它是基於MooTools框架的。
官方地址：Validate
JavaScript時間選擇器
是一個基於MooTools的時間選擇器使用圖片選擇當前時間，方便可視選擇時間。
官方地址： JavaScript Time Picker
MultipleSelect：MooTools多選擇界面
MultipleSelect是一個MooTools框架下的完全自由定製的多選擇元素界面。自定義了一個多選對號圖標。
官方地址： MultipleSelect
HTML 表單提示
HTML 表單提示實現了效果在表單填寫時幫助文字數顯示，使用MooTools實現這個效果。

官方網址：HTML Form Tips
演示地址：DEMO

elSelect 自定義的SELECT元素
elSelect是一個基於MooTools框架開發的自定義SELECT元素，elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.
官方網址：elSelect
Select Box Factory:MooTools選擇框
Select Box Factory 是一個使用了MooTools選擇框效果的插件，可以實現元素選擇移除的效果。
代碼網址：Select Box Factory v1.0
Lightbox
Lightbox是一個MooTools的覆蓋彈出框插件，支持圖片彈出大圖等效果。
官方地址：Lightbox
QuickBox Lightbox
QuickBox是一個基於MooTools1.2版本開發的Lightbox控件。與其它Lightbox控件相比，它最大不同之處在於可以利用鼠標滾輪控制圖片切換。
官方網址：QuickBox Lightbox
Milkbox Lightbox
Milkbox基於MooTools1.2框架開發的Lightbox插件。
官方網址 ：Milkbox Lightbox
Videobox: Lightbox for videos
Videobox是一個只有6k大小的腳本，用於在頁面中顯示視頻。Videobox使用swfobject來嵌入Flash。視頻可以來自Youtube、Metacafe、Google Video、iFilm和自己設置的Flash。
官方網址:Videobox。
Slideshow 2 :MooTools圖片幻燈
Slideshow 2是一個MooTools圖片幻燈插件，實現了漂亮的相框和圖片切換動畫效果。
官方網址：Slideshow 2
SmoothGallery:MooTools幻燈效果
SmoothGallery 2.0是MooTools幻燈效果插件可以實現各種圖片切換效果。
官方網址：SmoothGallery 2.0
演示地址：demo
Imago 支持Ajax的圖片畫廊
一個基於MooTools框架開發的Ajax Image Gallery 。
官方網址:Imago
Fancy upload
是一個MooTools插件實現上傳功能效果。並且顯示進度條效果。官方網址：Fancy upload
演示地址：

Attach a File A reduced and snappier interface (preview).
Queued Photo Uploader Showcase with converted FancyUpload.

Single File Button A si .
MooTabs – MooTools選項卡效果
MooTabs是MooTools的一個實現選項卡效果的小插件。官方地址：MooTabs – Tiny tab class for MooTools


顯示例子：
-MooTabs using default CSS File and AJAX to get the panel's content: Watch
-MooTabs using default CSS File and Default Options: Watch
-MooTabs using a modified CSS File and custom Options: Watch
-MooTabs using another modified CSS File and custom Options: Watch
Ajax登陸框
使用MooTools實現的Ajax登陸框效果,並且提供了下載代碼。
顯示效果：demo
官方網址：Ajax login form
Page Loader Ajax頁面載入類
Page Loader 提供了一個MooTools的Ajax頁面載入類，可以通過Ajax載入一個頁面內容。
官方網站： Page Loader
MooTools Dotter
MooTools Dotter 是一個使用MooTools實現Ajax載入圖片等文件顯示等待效果的插件。
官方網址：MooTools Dotter

MediaBoxAdvanced
MediaBoxAdvanced 是一個MooTools 圖片覆蓋效果插件支持多種媒體格式。
官方網站：MediaBoxAdvanced
演示地址：demo
Multibox
Multibox是MooTools的一個彈出效果框插件，支持多種媒體:圖片、flv等。
官方網站：Multibox
SlideItMoo – 圖片幻燈效果
SlideItMoo 是MooTools的一個圖片幻燈效果插件。
代碼網址：SlideItMoo
演示地址：demo
ReMooz
ReMooz是MooTools的一個圖片放大插件,效果是點擊小圖片，出現大的圖片效果。
官方網站：ReMooz
mooSlide 3.2
mooSlide 3.2是MooTools實現的一個顯示在窗口底部或在頁面的頂部重疊層效果。
官方網站：mooSlide 3.2
演示地址： Demo
moo.rd
moo.rd是MooTools的一個插件集提供了表格管理等插件效果。
官方網站：moo.rd
演示例子： examples
Clientcide Plugins
Clientcide Plugins 是一個大的MooTools插件集，集成了許多常用的MooTools功能
官方網站 ： Clientcide Plugins
Meteora
Meteora 是一個 MooTools的插件集合包括許多小工具，有日曆、數據表、文本輸入、對話框等控件。
官方網站： Meteora
演示地址：　ｄｅｍｏ
Mocha UI
Mocha UI 是一個使用mootool框架開發的富用戶界面，有滑塊 ，菜單，樹形目錄，小窗口等界面效果。Mocha UI
JxLib
JxLib 是MooTools一個富客戶端用戶界面代碼庫，rich client ui library。有常見的樹形目錄，選項卡等界面。JxLib

Mootools 教學列表：