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
演示地址: demo
Mocha UI
Mocha UI 是一个使用mootool框架开发的富用户界面,有滑块 ,菜单,树形目录,小窗口等界面效果。Mocha UI
JxLib
JxLib 是MooTools一个富客户端用户界面代码库,rich client ui library。有常见的树形目录,选项卡等界面。JxLib

站点统计