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();
});


猜你喜欢
- 本文实例为大家分享了Mysql实现通讯录的具体代码,供大家参考,具体内容如下#-*-code:utf-8-*-import pymysqld
- 为什么要做接口自动化框架1、业务与配置的分离2、数据与程序的分离;数据的变更不影响程序3、有日志功能,实现无人值守4、自动发送测试报告5、不
- 神奇创意相框! 是的,主要利用position的relative, absolute, z-index属性。结合Photo Frame(相框
- 最近在折腾Python Web,在测试的时候发现,本机可以正常访问,但外网无法通过公网IP访问页面。经过各种搜索,有大致三种解决方案。一、修
- 一、yield运行方式我们定义一个如下的生成器:def put_on(name): print("Hi {}, 货物来了,准备搬到
- 本文实例讲述了PHP实现对图片的反色处理功能。分享给大家供大家参考,具体如下:今天有个需求用php对图片进行反色,和转灰,之前不知道可不可行
- 首先,我用的mysql版本号是5.5.17的,最近遇到的问题是在eclipse中通过jdbc往数据库写中文数据的时候,在数据库中显示的是??
- 什么是瀑布图?瀑布图用表达两个数值之间的变化过程,过程值为正的时候,向上加,过程值为负的时候向下减[1]。今天分享在Python中绘制瀑布图
- function commafyback(num) { var x = num.split(','); return par
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作⚠️边界填充概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大. 今天
- meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head&
- 创建测试dataframe:>>> import pandas as pd>>> df = pd.Dat
- 项目场景:postman通常需要传递各式各样的参数,这样的话,进行写参数比较头疼,不知怎么进行传参。解决方案:可以考虑将参数对象写成json
- 为了测试某个服务的稳定性,通常需要在服务长时间运行的情况下,监控其资源消耗情况,比如cpu和内存使用这里借助python的psutil这个包
- 1.byte和str互转b = b"example" s = "example" bytes(s,
- 近日因为升级系统的需要,将旧mysql数据库从3.23升级到5.0.41先从mysql3.23中mysqldump出数据文件data.sql
- 本文实例为大家分享了JavaScript实现网页版计算器的具体代码,供大家参考,具体内容如下由于无聊看电脑上的系统软件翻到了计算器这个功能,
- 本文实例讲述了Python进程间通信用法。分享给大家供大家参考。具体如下:#!/usr/bin/env python# -*- coding
- python logging模块主要是python提供的通用日志系统,使用的方法其实挺简单的,这块就不多介绍。下面主要会讲到在使用pytho
- 什么是Densenet据说Densenet比Resnet还要厉害,我决定好好学一下。ResNet模型的出现使得深度学习神经网络可以变得更深,