有人最近要求我们写一个关于mootools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何mootools或者是javascript经验,但是至少有基本的html和css知识。
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核心库。
(fdream注:现在mootools 1.2下载下来后,默认的后缀名是”.txt“,请更改后缀为”.js“。)
现在,你已经在你的页面中应用了了mootools了,你还需要一个地方来写你的代码。这里有两种选择:
1. 把下面的代码写在你的head标签之内,你的代码写在script标记之内:
2. 在外部建立一个javascript文件,然后在页面头部链接此文件:
在这里,你可以使用任何一种方式。我通常把domready事件中调用的方法放在script标记之间,而我的函数放在外部文件中。
mootools的方法必须在domready事件中调用。
(fdream注:不完全是这样,但是可以保证你的javascript代码尽可能少地出错。顺便说一下domready事件:当页面的html代码(不包括图片、flash等等,只是代码)下载完成时,此时会触发domready事件。这样可以在页面完全下载完成(包括图片、flash等都下载完成)之前执行你的脚本,从而避免因为一张大图要下很长时间而导致脚本不能执行,从而出现异常。)
你仍然可以在domready之外创建你的函数,然后在domready中调用它:
在这第一讲中,我们会仔细地看了一下这个库架构的一些关键组件,然后粗略地看一下其他基本功能。
core(核心)
核心(core)部分包含mootools库的一些公共函数(function)来完成一些常见的任务,也加强了许多原有功能(后面会有详细介绍)。下面的内容只是作为mootools功能的一些例子,并不能替代您阅读mootools的文档。
(fdream注:第一个描述有误,$chk(value)只是检查一个值是不是已经定义或者已经赋值,为0时会返回true,只有undefined或者null时返回false。)
native(本地对象)
在库的这一部分也包含了一些公共工具,可以让你很容易地操作数组(array,值或者对象的简单列表)、函数(function)、数值(number)、字符串(string)、哈希对象(hash)和事件(event)。这里是本地对象中的一些工具特性:
class(类)
一个javascript类(相对于css的类),是一个功能可以重复使用的对象。若要更多地了解mootools类,你可以看看valerio的这篇简单介绍的文章(mootools类——怎样使用它们)。我也同时推荐david walsh的mootools类模板。
element(元素)
mootools库的element类提供了一些非常有用的功能。通过这个类,你可以选择dom元素、操控他们的属性和位置、改变他们的css风格。这里是mootools提供的一些非常强大的处理dom元素的工具:
(fdream注:不推荐在一个页面中有多个相同id,最好不要出现,在一些浏览器下很容易出现不可预见的错误。)
utilities(实用工具)
实用工具(utilities)提供了更多精良的选择逻辑,包括domready事件、可以管理ajax调用的工具、可以轻松管理cookie的工具,甚至还有”swiff“功能,可以提供javascript接口给actionscript。
fx(效果)
这可能是mootools最有趣的部分了。通过fx(效果),你可以创建”tween“(补间动画)和”morph“(形变动画)效果,从而让你的dom对象动起来。
request(请求)
包含一些可以轻松处理javascript xmlhttprequest(ajax)功能的工具。为了减轻整个请求/响应(request/response)带来的痛苦,request对象还有一些专门用来处理html和json对象(javascript对象表示法)的扩展。
plugins(插件)
mootools插件扩展了核心功能,可以轻松地为你的web项目添加高级ui功能。插件列表如下:
在开始下一讲之前,花一点时间全面地看一下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论坛。
新闻热点
疑难解答