Mootools 1.2教程(1)——MooTools介绍
作者:Fdream 来源:Fdream blog 发布时间:2008-11-12 13:01:00
MooTools 1.2介绍
原文地址:30 Days of Mootools 1.2 Tutorials - Day 1 - Intro to the Library
有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何MooTools或者是JavaScript经验,但是至少有基本的HTML和CSS知识。
教程目录:
待续……
Mootools相关链接:
官方网站:http://mootools.net
MooTools 1.2 JavaScript库介绍
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
首先,下载并引用MooTools 1.2核心库。
把MooTools 1.2核心库上传到你的服务器或者工作区
在你的HTML文档头部head标记之内链接MooTools 1.2核心库
参考代码:
<script src="mootools-1.2-core.js” type="text/javascript"></script>
(Fdream注:现在MooTools 1.2下载下来后,默认的后缀名是”.txt“,请更改后缀为”.js“。)
在Head标签之内添加Script标签
现在,你已经在你的页面中应用了了MooTools了,你还需要一个地方来写你的代码。这里有两种选择:
1. 把下面的代码写在你的head标签之内,你的代码写在script标记之内:
参考代码:
<script type="text/javascript">
//Mootools code goes here
</script>
2. 在外部建立一个JavaScript文件,然后在页面头部链接此文件:
参考代码:
<script src="myJavaScriptFile.js" type="text/javascript"></script>
在这里,你可以使用任何一种方式。我通常把domready事件中调用的方法放在script标记之间,而我的函数放在外部文件中。
把代码放在domready中
MooTools的方法必须在domready事件中调用。
参考代码:
window.addEvent('domready', function() {
exampleFunction();
});
(Fdream注:不完全是这样,但是可以保证你的JavaScript代码尽可能少地出错。顺便说一下domready事件:当页面的HTML代码(不包括图片、flash等等,只是代码)下载完成时,此时会触发domready事件。这样可以在页面完全下载完成(包括图片、flash等都下载完成)之前执行你的脚本,从而避免因为一张大图要下很长时间而导致脚本不能执行,从而出现异常。)
把代码放在一个函数中
你仍然可以在domready之外创建你的函数,然后在domready中调用它:
参考代码:
var exampleFunction = function() {
alert('hello')
};
window.addEvent('domready', function() {
exampleFunction();
});
猜你喜欢
- 采用双重循环。把图片进行“.”分割后名字问前面部分,那其余数据库中的 图片路径记录进行对比 采用vb的InStr函数 如果存在的话返回值&g
- Dreamweaver快捷键大全,记住一些常用的快捷键会大大提高你的网页设计效率,如果你都使用快捷键,那么如果你去面试工作就容易被录取,呵呵
- iou33449999 文:一个链接 一个层 一个onMouseOver 一个onMouseOut然后这个层就会在onMouseOver这个
- SQL Server 2000 清理日志精品教程SQL Server 2000 数据库日志太大!如何清理SQL Server 2000的日志
- 鼠标双击滚动屏幕,单击停止滚动,很多小说新闻网站都有这个很人性化的功能,阅读起小说、新闻来很方便,不用手动拉滚动条。js代码如下:<h
- 在access中进行时间的比较sql语句很简单,如select * from table where thetime>#\"
- 首先安装WSH,NT(SERVER、WORKSTATION)、W2K服务器上需要安装WSH2.0或者更高版本。然后,参照下列代码即可:<
- 用window.open打开的窗口中,有时候session变量会丢掉,给asp编程带来的一定的麻烦。用参数传递解决它:<DIV&nbs
- 启用Ad Hoc Distributed Queries:exec sp_configure 'show advanced opti
- QL Server事件探查器(Profiler)可以帮助数据库管理员跟踪SQL Server数据库所执行的特定事件,监视数据库的行为;并将这
- 代码如下:<% Randomize Do While Len(pass)<12 
- 五、过渡转化的使用在《mind hack》一书中,揭示了人脑鲜为人知的工作原理。其中提到了“突然的移动或闪烁会吸引人的注意力,这正是负责视觉
- 这是来自于Steven D编写的WEB前端开发设计要点的内容。虽然许多设计师已非常熟练的使用了Web标准,让人遗憾的是有很多细节的排版处理仍
- 请教:如何在现存的文档中动态嵌入一段JS?如果是一段CSS呢?创建一个<script></script>并在scri
- 你知道(X)HTML中最多余的标签中是什么吗?在我看来就是这个<a>标签,不错,就是每个网站使用最多的超级链接标签<a&g
- 最简单的:<textarea name="A" cols="45" rows="2&
- 不可否认,阿里巴巴走得越来越快也越来越好。技术的成熟让很多B2B B2C网站都在跟风学习它们。在这里我就来说一说它的搜索效果吧。如图所示:&
- 相同记录行如何取最大值我想这个东西在作一些相关采购系统或成本报价系统应该很有用的吧取当前的最有效的价格.记录下来与大家分享!--测试数据&n
- 使用Northwind 数据库首先查询Employees表查询结果:city列里面只有5个城市使用ROW_NUMBER() OVER(PAR
- 代码如下:<html> <head> &nb