网络编程
位置:首页>> 网络编程>> JavaScript>> Mootools 1.2教程(1)——MooTools介绍(2)

Mootools 1.2教程(1)——MooTools介绍(2)

作者:Fdream 来源:Fdream blog 发布时间:2008-11-12 13:01:00 

标签:MooTools,教程,框架,javascript

关于库的详细介绍

在这第一讲中,我们会仔细地看了一下这个库架构的一些关键组件,然后粗略地看一下其他基本功能。

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 1.2教程(2)——DOM选择器

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com