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创建的显示事件信息的日历插件。

插件地址： MooTools Event 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

转载于:https://www.cnblogs.com/delphi2007/articles/1602502.html