MooTools - 快速指南
MooTools - 简介
MooTools 是一个面向对象的轻量级 JavaScript 框架。MooTools 的全称是 My Object-Oriented Tools。它根据免费的开源 MIT 许可证发布。它是最受欢迎的 JavaScript 库之一。
MooTools 是一个功能强大的轻量级 JavaScript 库。它创建了 JavaScript 在 Web 开发中的简单交互。它还可以作为 CSS 扩展做很多事情。MooTools 有各种漂亮的扩展，让您能够创建动画效果。
MooTools 的组件
MooTools 包含许多组件。以下是不同的组件类别 −
核心 − 所有其他组件所需的实用函数集合。
更多 −官方附加组件集合，用于扩展核心并提供增强功能。
Class − 类对象实例化的基础库。
Natives − JavaScript 本机对象增强功能的集合。本机添加了功能、兼容性和简化编码的新方法。
Element − 包含大量对 HTML Element 对象的增强和兼容性标准化。
FX − 有助于为页面元素设置动画的高级效果 API。
Request − 包括 XHR 接口、Cookie JSON 和 HTML 检索特定工具，供开发人员利用。
Window −提供跨浏览器界面，用于获取客户端特定信息，例如窗口尺寸。
MooTools – 优势
与原生 JavaScript 相比，MooTools 具有许多优势。这些优势包括以下 −
MooTools 是一个广泛的模块化框架，允许开发人员创建自己的自定义组件组合。
MooTools 遵循面向对象范式和 DRY 原则(不要重复自己)。
MooTools 提供高级组件效果，并优化过渡。它主要用于 Flash 开发人员。
MooTools 为 DOM 提供了不同的增强功能。这有助于开发人员添加、修改、选择和删除 DOM 元素。而且，它还支持存储和检索元素存储。
MooTools - 安装
MooTools 是一个功能强大的 JavaScript 库，可使用面向对象范式设计 DOM 对象。本章介绍如何安装和使用 MooTools 库以及 JavaScript。
要安装 MooTools 库，请按照以下步骤操作 −
步骤 1:下载 MooTools Core 和 MooTools More 库
您可以从以下链接 MooTools-Core 和 MooTools-More 下载最新版本的 MooTools Core 和 MooTools More 库。单击链接后，您将被引导至浏览器中的以下屏幕 −
并且，
单击下载按钮，您将获得最新版本的 MooTools 库。在本教程中，我们使用 MooTools-Core-1.6.0.js 和 MooTools-More-1.6.0.js 库。
步骤 2:将 MooTools Core 和 More 库上传到服务器
现在，您的文件系统中已有 MooTools 库。我们必须将这些库复制到提供应用程序网页的服务器(工作区)中。在本教程中，我们使用 C:\MooTools\workspace\ 目录位置。
因此，将 MooTools-Core-1.6.0.js 和 MooTools-More-1.6.0.js 文件复制到给定的目录位置。
步骤 3:将 MooTools Core 和 More 库链接到脚本标记中
JavaScript 库是一个 .js 文件。如果将此库包含在 JavaScript 代码中，请将其包含在脚本标记中，如下所示。查看以下代码片段。
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script> <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
MooTools - 程序结构
MooTools 是一种可用于设计面向对象模型的工具。本章中我们来讨论 MooTools 库的一个简单示例。
示例
在这里我们将使用 Class 设计一个名为 Rectangle 的模型。为此，我们需要声明属性 — Width 和 Height。
查看以下代码，并将其保存到 sample.html 中。
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javaScript">
var Rectangle = new Class({
//properties
width: 0,
height: 0,
//methods
initialize: function(widthVal, heightVal) {
this.width = widthVal;
this.height = heightVal;
},
details: function() {
document.write("Welcome to MooTools demo program");
document.write("Width: "+this.width+" Height: "+this.height);
},
});
var rec = new Rectangle(5,4);
rec.details();
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
MooTools - 选择器
选择器用于选择 HTML 元素。每当您想要制作交互式网页时，您都需要从该网页中选择一些数据或操作。选择器帮助我们通过 HTML 请求从元素接收数据。
基本选择器 ($)
$ 是 MooTools 中的基本选择器。使用它，您可以通过其 ID 选择 DOM 元素。例如，假设您有一个名为 body_id 的 HTML 元素(如 div)。
<div id = "body_id"> </div>
如果您想选择此 div，请使用以下语法 −
语法
//选择 ID 为"body_id"的元素
$('body_id');
getElement( )
getElement() 是一种扩展基本选择器 ($) 的方法。它允许您使用元素 ID 优化选择。getElement() 仅选择单个元素，如果有多个选项，则将返回第一个元素。您还可以使用类名来获取元素的第一次出现。但它不会获取元素数组。
多个选择器 ($$)
$$ 用于选择多个元素并将这些多个元素放入数组中。从该数组中，我们可以以不同的方式操作、检索和重新排序列表。看一下以下语法。它定义了如何从网页上的 HTML 元素集合中选择所有 div 元素。
语法
<div> <div>a div</div> <span id = "id_name">a span</span> </div>
如果要选择所有div，请使用以下语法−
语法
//页面中的所有div
$$('div');
如果要选择具有相同id名称的多个div，请使用以下语法−
语法
//选择id为'id_name'的元素和所有div
$$('#id_name', 'div');
getElements()
getElements()方法与getElement()方法类似，该方法根据条件返回所有元素。您可以使用元素名称(a、div、输入)来选择这些集合，也可以使用特定元素类名称来选择同一类的元素集合。
使用运算符包含和排除结果
MooTools 支持用于优化选择的不同运算符。您可以在 getElements() 方法中使用所有这些运算符。这些运算符中的每一个都可用于按名称选择输入元素。
查看下表。它定义了 MooTools 支持的不同运算符。
| 运算符 | 描述 | 示例 |
|---|---|---|
| = (equal to) | 通过名称选择输入元素。 | $('body_wrap').getElements ('input[name = phone_number]'); |
| ^= (以...开头) | 通过比较名称的起始字母来选择输入元素。 | $('body_wrap').getElements ('input[name^=phone]'); |
| $= (以...结尾) | 通过比较名称的结束字母来选择输入元素。 | $('body_wrap').getElements ('input[name$ = number]'); |
| != (不相等to) | 通过名称取消选择输入元素。 | $('body_wrap').getElements ('input[name!=address]'); |
| *= (Contains) | 选择包含特定字母模式的输入元素。 | $('body_wrap').getElements ('input[name*=phone]'); |
基于元素顺序的选择器
MooTools 选择器在元素选择中遵循特定的顺序。选择器主要遵循两种顺序;一个是偶数，另一个是奇数。
注意 −此选择器从 0 开始，因此第一个元素是偶数。
偶数顺序
按此顺序，选择器选择以偶数顺序排列的元素。使用以下语法选择 HTML 页面中的所有偶数 div。
语法
// 选择所有偶数 div
$$('div:even');
奇数顺序
按此顺序，选择器选择以奇数顺序排列的元素。使用以下语法选择 HTML 页面中的所有奇数 div。
语法
// 选择所有奇数 div
$$('div:odd');
示例
以下示例显示了选择器的工作原理。假设网页上有一个文本框和一个技术列表。如果您通过在文本框中输入该名称从列表中选择一项技术，则列表会根据您的输入显示过滤后的结果。这可以使用 MooTools 选择器来实现。使用选择器，我们可以向文本框添加事件。事件侦听器将从文本框中选择数据并从列表中检查它。如果列表中有数据，则列表会显示过滤后的结果。请查看以下代码。
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready',function(){
var input = $('filter');
// 将每个元素的 title 属性设置为
// 将其文本改为小写
$$('ul > li').each(function(item){
item.set('title', item.get('text').toLowerCase());
});
// 用户输入时调用的函数
var filterList = function(){
var value = input.value.toLowerCase();
$$('li').setStyle('display','none');
// 检查 title 属性是否包含用户输入的内容
$$('ul > li[title*=' + value + ']').setStyle('display','');
};
// 实现此操作
input.addEvent('keyup', filterList);
});
</script>
</head>
<body>
<p><input id = "filter" type = "text" /></p>
<ul>
<li>C</li>
<li>Cpp</li>
<li>Java</li>
<li>JavaScript</li>
<li>Hadoop</li>
<li>Hive</li>
<li>CouchDB</li>
</ul>
</body>
</html>
您将收到以下输出 −
输出
MooTools - 使用数组
MooTools 是一个轻量级 JavaScript 库，可帮助创建动态网页。在管理 DOM 元素时，我们需要选择网页的所有 DOM 元素。可以使用数组处理此集合。
本章介绍如何使用数组管理 DOM 元素。
each() 方法
这是处理数组的基本方法。它通过列表迭代所有元素。您可以根据需要使用此方法。例如，如果您想选择页面的所有 div 元素，请按照下面给出的脚本操作。查看以下包含多个 div 的 html 页面。
<div>One</div> <div>Two</div>
您可以使用以下脚本从页面上的 div 集合中选择 每个单独的 div。该脚本将选择每个 div 并传递一个警报。查看以下脚本。
脚本
$$('div').each(function() {
alert('a div');
});
您可以使用以下语法来处理上面给出的示例。查看 HTML 页面。
脚本
<div id = "body_div"> <div>One</div> <div>Two</div> </div>
此处，两个 div 被另一个 div — body_div 包围。在设计脚本时，我们只需选择一个外部 div。稍后，通过使用 getElements() 方法，我们可以选择两个内部 div。查看以下脚本。
脚本
$('body_wrap').getElements('div').each(function() {
alert('a div');
});
您可以使用不同的方法编写上述脚本，如下所示。此处，我们使用单独的变量来选择 body_div。
脚本
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});
从数组中选择特定元素
在操作元素数组时，我们可以从元素数组中选择特定元素。以下是用于操作 DOM 元素的一些重要方法 −
getLast()
此方法返回数组的最后一个元素。让我们设置一个数组来理解此方法。
var myArray = $('body_div').getElements('div');
我们现在可以抓取数组中的最后一个元素。
var lastElement = myArray.getLast();
变量 lastElement 现在表示 myArray 中的最后一个元素。
getRandom()
getRandom() 方法的工作方式与 getLast() 方法类似，但会从数组中获取一个随机元素。
语法
var randomElement = myArray.getRandom();
变量 randomElement 现在表示 myArray 中随机选择的元素。
数组的副本
MooTools 提供了一种使用 $A() 函数复制数组的方法。以下是 $A() 函数的语法。
语法
var <variable-name> = $A ( <array-variable>);
将元素添加到数组
有两种不同的方法可以将元素添加到数组中。第一种方法允许您逐个添加元素，也可以将两个不同的数组合并为一个。
include()
include() 方法用于将项目添加到 DOM 元素数组中。例如，考虑以下 HTML 代码，其中包含两个 div 元素和一个 span 元素，位于单个封闭的 div — body_div 下。
语法
<div id = "body_div"> <div>one</div> <div>two</div> <span id = "add_to_array">add to array</span> </div>
在上面的代码中，如果我们在 body_div 元素上调用 getElements('div') 方法，我们会得到一个和两个 div，但 span 元素不会包含在数组中。如果要将其添加到数组中，请在数组变量上调用 include() 方法。请查看以下脚本。
脚本
//通过选择 div 元素创建数组变量
var myArray = $('body_wrap').getElements('div');
//首先将元素添加到 var
var newToArray = $('add_to_array');
//然后将 var 包含在数组中
myArray.include(newToArray);
现在，myArray 包含 div 和 span 元素。
combine()
此方法用于将一个数组的元素与另一个数组的元素组合在一起。这还可以处理重复的内容。例如，考虑以下 HTML 代码，其中包含单个封闭 div — body_div 下的两个 div 元素和两个 span 元素。
语法
<div id = "body_div"> <div>one</div> <div>two</div> <span class = "class_name">add to array</span> <span class = "class_name">add to array, also</span> <span class = "class_name">add to array, too</span> </div>
在上面的代码中，在 body_div 元素上调用 getElements('div') 方法。您将获得一个和两个 div。调用 $$('.class_name') 方法选择两个 span 元素。现在您有一个 div 元素数组和另一个 span 元素数组。如果要合并这两个数组，则可以使用 Combine 方法 ()。请查看以下脚本。
脚本
//像我们之前一样创建数组
var myArray= $('body_wrap').getElements('div');
//然后从所有具有 .class_name 的元素创建一个数组
var newArrayToArray = $$('.class_name');
//然后将 newArrayToArray 与 myArray 合并
myArray.combine(newArrayToArray );
现在，myArray 包含 newArrayToArray 变量的所有元素。
示例
这将帮助您理解 MooTools 中的数组。假设我们将背景颜色应用于包含 div 和 span 的元素数组。请看以下代码。此处，第二个元素数组不属于任何 id 或 class 组，因此它不反映任何背景颜色。请看以下代码。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var myArray = $('body_wrap').getElements('.class_name');
var addSpan = $('addtoarray');
var addMany = $$('.addMany');
myArray.include(addSpan);
myArray.combine(addMany);
var myArrayFunction = function(item) {
item.setStyle('background-color', '#F7DC6F');
}
myArray.each(myArrayFunction);
});
</script>
</head>
<body>
<div id = "body_wrap">
<div class = "class_name">one</div>
<div>two</div>
<div class = "class_name">three</div>
<span id = "addtoarray">add to array</span>
<br /><span class = "addMany">one of many</span>
<br /><span class = "addMany">two of many</span>
</div>
</body>
</html>
您将收到以下输出 −
输出
MooTools - 函数
MooTools 中的函数是 JavaScript 中的一个概念。我们已经知道如何在 JavaScript 中使用函数。通常，最好将函数放在脚本标记中的页面主体之外。在 MooTools 中，我们遵循相同的模式。在这里，您可以根据需要设计自己的函数。现在我们必须在 domready 函数中调用所有用户定义的函数。
查看以下语法以了解如何在 MooTools 中使用通用函数。
语法
<script type = "text/javascript">
/*
Function definitions go here
*/
window.addEvent('domready', function() {
/* Calls to functions go here */
});
</script>
基本结构
在 MooTools 中定义函数有几种基本方法。JavaScript 和 MooTools 的函数语法没有区别，区别在于调用函数的方式。我们来看一个定义名为 demo_function 的函数的小例子。请看下面的代码。
示例
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//Define simple_function as a function
var simple_function = function(){
document.write('This is a simple function');
}
window.addEvent('domready', function() {
//Call simple_function when the dom(page) is ready
simple_function();
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
单参数函数
您还可以创建一个接受参数的函数。要将参数与函数一起使用，您需要在括号中添加变量名。提供变量后，变量即可在里面使用。让我们举一个例子，定义一个接受单个参数的函数，并随参数一起打印一条消息。
查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var single_parameter_function = function(parameter){
document.write('The parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('DEMO PARAMETER');
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
返回值
每当您想将一个函数的结果用作另一个变量的输入时，您都需要使用该函数的返回值。您可以使用 return 关键字从函数返回值。让我们举一个例子，定义一个函数，该函数将接受两个参数值并返回这两个参数的总和。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var two_parameter_returning_function = function(first_number, second_number){
var third_number = first_number + second_number;
return third_number;
}
window.addEvent('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
document.write("Return value is : " + return_value);
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
MooTools - 事件处理
与选择器一样，事件处理也是 MooTools 的一个基本概念。此概念用于创建事件和事件的操作。我们还需要掌握操作及其效果。让我们在本章中尝试几个事件。
单击左键
Web 开发中最常见的事件是单击左键。例如，超链接识别单击事件并将您带到另一个 DOM 元素。第一步是向 DOM 元素添加单击事件。让我们举一个向按钮添加单击事件的示例。当您单击该按钮时，它将显示一条消息。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var clickFunction = function(){
//把你想发生的事情放在这里
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>
您将收到以下输出 −
输出
单击按钮时，您将收到以下消息 −
此按钮元素识别单击事件
鼠标进入和鼠标离开
鼠标进入和鼠标离开是事件处理中最常见的事件。操作根据鼠标的位置应用。如果鼠标的位置进入 DOM 元素，则它将应用一个操作。如果它离开 DOM 元素区域，则它将应用另一个操作。
让我们举一个例子来解释鼠标进入事件的工作原理。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//把你想发生的事情放在这里
$('result').set('html', "Recognizes the mouse enter event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>
您将收到以下输出 −
输出
如果您将鼠标指针放在按钮上，那么您将收到以下消息。
Recognizes the mouse enter event
让我们举一个例子来解释鼠标离开事件的工作原理。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//把你想发生的事情放在这里
$('result').set('html', "Recognizes the mouse leave event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>
您将收到以下输出 −
输出
如果您将鼠标指针放在按钮上，那么您将收到以下消息。
Recognizes the mouse leave event
删除事件
此方法用于删除事件。删除事件与添加事件一样简单，并且遵循相同的结构。查看以下语法。
语法
//与前面的示例一样使用 .removeEvent 方法
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);
按键作为输入
MooTools 可以识别您的操作 — 您通过 DOM 元素给出的输入类型。通过使用 keydown 函数，您可以从输入类型 DOM 元素中读取每个键。
让我们举一个例子，其中有一个文本区域元素。现在让我们向文本区域添加一个 keydown 事件，每当文本区域识别出任何密钥库时，它都会立即响应警报消息。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke value');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>
您将收到以下输出 −
输出
尝试在文本区域中输入一些内容。您将看到一个警告框以及以下消息。
This textarea can now recognize keystroke value
尝试向同一示例添加一些文本，当您输入文本区域时，该文本区域会读取其中的值。可以使用带有事件的 event.key 函数来实现。请查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>
您将收到以下输出 −
输出
尝试在文本区域中输入文本。您将被引导至一个警告框，其中显示您在文本区域中输入的值。
MooTools - DOM 操作
我们已经知道每个 HTML 页面都是使用 DOM 元素设计的。使用 MooTools，您可以操作 DOM 元素，这意味着您可以创建、删除和更改 DOM 元素的样式。
基本方法
以下是捕获和帮助修改 DOM 元素属性的基本方法。
get()
此方法用于检索元素属性，如 src、value、name 等。以下语句是 get 方法的语法。
语法
//这将返回元素的 html 标签(div、a、span...)
$('id_name').get('tag');
使用 get() 方法检索元素时，您将收到以下属性列表。
- id
- name
- value
- href
- src
- class(如果是元素，将返回所有类)
- text(元素的文本内容)
set()
此方法用于将值设置为变量。与事件结合使用时非常有用，可让您更改值。以下语句是 set 方法的语法。
语法
//这将设置 #id_name 的 href 为"http://www.google.com"
$('id_name').set('href', 'http://www.google.com');
erase()
此方法可帮助您清除元素属性的值。您需要选择要从元素中清除的属性。以下语句是 eras() 方法的语法。
语法
//这将清除 #id_name 的 href 值
$('id_name').erase('href');
移动元素
移动元素是指将现有元素从页面的一个位置移动到另一个位置。您可以使用inject()方法在页面中移动元素。举个例子，一个HTML页面包含三个div元素，它们按顺序分别包含内容A、B和C。请看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
})
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>
您将收到以下输出 −
输出
现在，使用 MooTools 中的 injection() 方法，我们可以将顺序从 ABC 更改为 ACB。这意味着，我们需要将元素 B 放在元素 C 之后，将元素 C 放在元素 B 之前。查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');
//translates to: inject element C before element B
elementC.inject(elementB, 'before');
//translates to: inject element B after element C
elementB.inject(elementC, 'after');
});
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>
您将收到以下输出 −
输出
创建新元素
MooTools 提供了创建任何类型的 DOM 元素并将其插入 HTML 页面的选项。但是，我们必须为每个元素维护适当的语法。让我们举一个例子，其中以下代码片段是创建(锚)元素的语法。
语法
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://MooTools.net',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
让我们举一个例子，使用 MooTools 库创建一个锚元素。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://www.tutorialspoint.com',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
el.inject(document.body);
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
MooTools - 样式属性
MooTools 提供了一些特殊方法来设置和获取 DOM 元素的样式属性值。我们使用不同的样式属性，例如宽度、高度、背景颜色、字体粗细、字体颜色、边框等。通过设置和获取这些样式属性的不同值，我们可以以不同的样式呈现 HTML 元素。
设置和获取样式属性
MooTools 库包含不同的方法，用于设置或获取特定样式属性或多个样式属性的值。
setStyle()
此方法允许您设置 DOM 元素的单个属性的值。此方法将作用于特定 DOM 元素的选择器对象。让我们举一个为 div 元素提供背景颜色的示例。请看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
$('body_wrap').setStyle('background-color', '#6B8E23');
$$('.class_name').setStyle('background-color', '#FAEBD7');
});
</script>
</head>
<body>
<div id = "body_wrap">A</div>
<div class = "class_name">B</div>
<div class = "class_name">C</div>
<div class = "class_name">D</div>
<div class = "class_name">E</div>
</body>
</html>
您将收到以下输出 −
输出
getStyle()
getStyle() 方法用于检索元素的样式属性值。我们以检索名为 body_wrap 的 div 的背景颜色为例。查看以下语法。
语法
//首先，设置变量以保存样式值
var styleValue = $('body_wrap').getStyle('background-color');
多个样式属性
MooTools 库包含用于设置或获取特定样式属性或多个样式属性值的不同方法。
setStyle()
如果您想在单个元素或元素数组上设置多个样式属性，则必须使用 setStyle() 方法。查看 setStyle() 方法的以下语法。
语法
$('<element-id>').setStyles({
//使用不同的样式属性，如宽度、高度、背景颜色等。
});
示例
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 200px;
height: 200px;
background-color: #eeeeee;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var setWidth = function(){
$('body_div').setStyles({
'width': 100
});
}
var setHeight = function(){
$('body_div').setStyles({
'height': 100
});
}
var reset = function(){
$('body_div').setStyles({
'width': 200,
'height': 200
});
}
window.addEvent('domready', function() {
$('set_width').addEvent('click', setWidth);
$('set_height').addEvent('click', setHeight);
$('reset').addEvent('click', reset);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "set_width" value = "Set Width to 100 px"/>
<input type = "button" id = "set_height" value = "Set Height to 100 px"/>
<input type = "button" id = "reset" value = "Reset"/>
</body>
</html>
您将收到以下输出 −
输出
在网页上尝试一下这些按钮，你可以看到与 div 大小的区别。
MooTools - 输入过滤
MooTools 可以过滤用户输入，并且可以轻松识别输入的类型。基本输入类型是数字和字符串。
数字函数
让我们讨论几种检查输入值是否为数字的方法。这些方法还将帮助您操作数字输入。
toInt()
此方法将任何输入值转换为整数。您可以在变量上调用它，它将尝试从变量包含的任何内容中给出常规整数。
让我们举一个例子，设计一个包含文本框和一个名为TO INT的按钮的网页。该按钮将检查并返回您在文本框中输入的值作为实数整数。如果该值不是整数，则它将返回NaN符号。看一下下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var toIntDemo = function(){
var input = $('input').get('value');
var number = input.toInt();
alert ('Value is : ' + number);
}
window.addEvent('domready', function() {
$('toint').addEvent('click', toIntDemo);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "toint" value = "TO INT"/>
</body>
</html>
您将收到以下输出 −
输出
尝试不同的值并将它们转换为实数整数。
typeOf()
此方法检查您传递的变量的值，并返回该值的类型。
让我们举一个例子，我们设计一个网页并检查输入值是数字、字符串还是布尔值。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkType = function(){
var input = $('input').get('value');
var int_input = input.toInt();
if(typeOf(int_input) != 'number'){
if(input == 'false' || input == 'true'){
alert("Variable type is : Boolean"+" - and value is: "+input);
} else{
alert("Variable type is : "+typeof(input)+" - and value is: "+input);
}
} else{
alert("Variable type is : "+typeof(int_input)+"
- and value is:"+int_input);
}
}
window.addEvent('domready', function() {
$('checktype').addEvent('click', checkType);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "checktype" value = "CHECK TYPE"/>
</body>
</html>
您将收到以下输出 −
输出
尝试不同的值并检查类型。
limit()
limit() 方法用于设置特定数字的下限和上限值。数字不应超过上限值。如果超过，则数字将更改为上限值。此过程也与下限相同。
让我们举一个例子，它提供了一个用于输入值的文本框，提供了一个按钮来检查该值的限制。我们在示例中使用的默认限制是 0 到 255。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkLimit = function(){
var input = $('input').get('value');
var number = input.toInt();
var limited_number = number.limit(0, 255);
alert("Number is : " + limited_number);
}
window.addEvent('domready', function() {
$('check_limit').addEvent('click', checkLimit);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
</body>
</html>
您将收到以下输出 −
输出
尝试不同的数字来检查限制。
rgbToHex()
rgbToHex() 方法用于将红色、绿色和蓝色值转换为十六进制值。此函数处理数字，属于数组集合。让我们举一个例子，我们将设计一个网页来输入红色、绿色和蓝色的单独值。提供一个按钮将这三个值转换为十六进制值。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var rgbToHexa_Demo = function(){
var red = $('red').get('value');
var red_value = red.toInt();
var green = $('green').get('value');
var green_value = green.toInt();
var blue = $('blue').get('value');
var blue_value = blue.toInt();
var color = [red_value, green_value, blue_value].rgbToHex();
alert(" Hexa color is : " + color);
}
window.addEvent('domready', function() {
$('rgbtohex').addEvent('click', rgbToHexa_Demo);
});
</script>
</head>
<body>
Red Value: <input type = "text" id = "red" /><br/><br/>
Green Value: <input type = "text" id = "green" /><br/><br/>
Blue Value: <input type = "text" id = "blue" /><br/><br/>
<input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
</body>
</html>
您将收到以下输出 −
输出
尝试不同的红色、绿色和蓝色值并找到十六进制值。
字符串函数
让我们讨论一下 String 类的几种可以操作输入字符串值的方法。在继续之前，让我们先看看如何调用字符串函数的以下语法。
字符串
var my_variable = "Heres some text"; var result_of_function = my_variable.someStringFunction();
或者，
var result_of_function = "Heres some text".someStringFunction();
trim()
此方法用于删除给定字符串的开头和结尾位置的空格。它不会触及字符串内的任何空格。看一下下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.trim();
document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
在上面的警告框中，您可以发现调用 trim() 方法之前和调用 trim() 方法之后字符串中的差异。
clean()
此方法用于从给定字符串中删除所有空格，并在单词之间保持单个空格。查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.clean();
document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
contains()
此方法用于在给定字符串中搜索子字符串。如果给定字符串包含搜索字符串，则返回 true，否则返回 false。查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "Hai this is tutorialspoint";
var search_string = $('input').get('value');
var string_contains = input_string.contains(search_string);
alert("contains : " + string_contains);
}
window.addEvent('domready', function() {
$('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>Hai this is tutorialspoint</p>
Enter search string: <input type = "text" id = "input" />
<input type = "button" id = "contains" value = "Search String"/>
</body>
</html>
您将收到以下输出 −
输出
substitute()
此方法用于将输入字符串插入到主字符串中。请查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "One is {one}, Two is {two}, Three is {three}";
var one_str = $('one').get('value');
var two_str = $('two').get('value');
var three_str = $('three').get('value');
var substitution_string = {
one : one_str,
two : two_str,
three : three_str
}
var new_string = input_string.substitute(substitution_string);
document.write("NEW STRING IS : " + new_string);
}
window.addEvent('domready', function() {
$('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>One is {one}, Two {two}, Three is {three}</p>
one String : <input type = "text" id = "one" /><br/><br/>
two String : <input type = "text" id = "two" /><br/><br/>
three String : <input type = "text" id = "three" /><br/><br/>
<input type = "button" id = "contains" value = "Substitute String"/>
</body>
</html>
您将收到以下输出 −
输出
在三个文本框中输入文本，然后点击替换字符串按钮，即可看到替换字符串。
MooTools - 拖放
MooTools 提供了一项强大的功能，可帮助您将拖放功能添加到网页元素中。我们可以通过创建自己的新 Drag.Move 对象来实现这一点。使用此对象，您可以定义选项和事件。Drag 和 Drag.Move 类来自 MooTools More 库。
让我们讨论一下 Drag.Move 对象的选项和事件。
Drag.Move
Drag.Move 是一个用于向 html 元素添加拖放功能的对象。Drag.Move 扩展了 Drag，因此我们可以通过 Drag.Move 对象使用 Drag 类的所有选项和事件。查看以下语法并了解如何使用 Drag.Move 对象。
语法
var myDrag = new Drag.Move(dragElement, {
// Drag.Move 选项
droppables: dropElement,
container: dragContainer,
// 拖动选项
handle: dragHandle,
// Drag.Move 事件
// Drag.Move 事件传递被拖动元素，
// 和放入可放置元素
onDrop: function(el, dr) {
// 将提醒放入可放置元素的 id
alert(dr.get('id'));
},
// 拖动事件
// 拖动事件传递被拖动元素
onComplete: function(el) {
alert(el.get('id'));
}
});
Drag.Move 选项
Drag.Move 提供以下选项来维护具有拖放功能的 html 元素 −
droppable − 这有助于您设置可拖放元素(在拖放相关事件上注册的元素)的选择器。
container − 这有助于您设置拖动元素的容器(将元素保留在里面)。
snap − 这有助于您设置在可拖动元素开始拖动之前用户必须拖动光标多少 px。默认值为 6，您可以将其设置为表示数字的任意数量的变量。
handle − 这有助于您为可拖动元素添加句柄。 Handle 成为唯一接受抓取的元素。
查看以下语法，了解如何以及在何处定义可放置元素、容器元素、捕捉元素和手柄元素。
语法
//此处我们通过 id 定义单个元素
var dragElement = $('drag_element');
//此处我们通过 class 定义元素数组
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');
//现在我们设置 Drag.Move 对象
var myDrag = new Drag.Move(dragElement , {
// Drag.Move 选项
// 使用我们上面定义的 droppables 变量设置我们的 droppables 元素
droppables: dropElements ,
// 使用容器元素变量设置我们的容器元素
container: dragContainer
// 设置用户必须拖动的像素。
Snap: 10
// 为可拖动元素添加句柄
handle: dragHandle
});
Drag.Move 事件
Drag.Move 事件提供不同的功能，可用于不同级别的操作。例如，当您开始拖放对象时，每个 Drag.Move 事件都会将拖动元素或放置元素作为参数传递。
以下是支持的事件 −
onStart()
这会在拖动开始时引发事件。如果您设置了长捕捉，则此事件直到鼠标处于一定距离时才会引发。看一下以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// 拖动选项将把拖动的元素作为参数传递
onStart: function(el) {
// 将你想要在开始时发生的任何事放在这里
}
});
onDrag()
这会在您拖动元素时持续引发事件。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// 拖动选项将把拖动的元素作为参数传递
onDrag: function(el) {
// 将你想要在拖动时发生的任何事放在这里
}
});
onDrop()
将可拖动元素放入可放置元素中时，会引发事件。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// 它将传递可拖动元素(本例中为"el")
// 以及可拖动元素与之交互的可放置元素(此处为"dr")
onDrop: function(el, dr) {
// 将您希望在放置时发生的任何操作放入此处
}
});
onLeave()
当可拖动元素离开可放置元素的边界时，会引发事件。看一下以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// 它将传递可拖动元素(本例中为 'el')
// 以及可拖动元素与之交互的可放置元素(此处为 'dr')
onLeave: function(el, dr) {
// 在此处输入离开可放置区域时要发生的任何操作
}
});
onEnter()
当可拖动元素进入可放置元素区域时，将引发此事件。看看下面的语法。
语法
var myDrag = new Drag.Move(dragElement , {
// 它将传递可拖动元素(本例中为"el")
// 以及可拖动元素与之交互的可放置元素(此处为"dr")
onEnter: function(el, dr) {
// 当可拖动元素进入可放置元素时，将触发此事件
}
});
onComplete()
这会引发一个事件。onComplete 指的是您放下可放置元素时，无论您是否落入可放置元素中，它都会引发此事件。看看下面的语法。
语法
var myDrag = new Drag.Move(dragElement , {
// Drag Options
// 拖动选项将把拖动的元素作为参数传递
onComplete: function(el) {
// 将你想要发生的事情放在完成位置
}
});
让我们举一个例子来探索本章中解释的所有功能。这些功能包括 — Drag、Drag.Move、onEnter、onLeave、onDrop、onStart、onDrag 和 onComplete。在这个例子中，我们提供了一个 HANDLE，您可以使用它将可拖动对象拖到容器中的任何位置。对于每个操作，左侧都有一个通知(以蓝色表示)。容器中有一个可放置区域。如果可拖动对象进入可放置区域，则激活最后三个指示器。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<style>
/* this is generally a good idea */
body {
margin: 0;
padding: 0;
}
/* make sure the draggable element has "position: absolute"
and then top and left are set for the start position */
#drag_me {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 0;
left: 0;
}
#drop_here {
width: 80%;
height: 200px;
background-color: #eee;
margin-left: 100px;
margin-top: -200px !important;
}
/* make sure the drag container is set with position relative */
#drag_cont {
background-color: #ccc;
height: auto;
width: 500px;
position:relative;
margin-top: 20px;
margin-left: 20px;
margin-bottom: auto;
}
#drag_me_handle {
width: 100%;
height: auto;
background-color: #F5B041;
}
#drag_me_handle span {
display: block;
padding: 20px;
}
.indicator {
width: 100px;
height: auto;
background-color: #0066FF;
border-bottom: 1px solid #eee;
}
.indicator span {
padding: 10px;
display: block;
}
.draggable {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var dragElement = $('drag_me');
var dragContainer = $('drag_cont');
var dragHandle = $('drag_me_handle');
var dropElement = $$('.draggable');
var startEl = $('start');
var completeEl = $('complete');
var dragIndicatorEl = $('drag_ind');
var enterDrop = $('enter');
var leaveDrop = $('leave');
var dropDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move options
droppables: dropElement,
container: dragContainer,
// Drag options
handle: dragHandle,
// Drag.Move Events
onDrop: function(el, dr) {
if (!dr) { }else {
dropDrop.highlight('#FB911C'); //flashes orange
el.highlight('#fff'); //flashes white
dr.highlight('#667C4A'); //flashes green
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //flashes orange
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C'); //flashes orange
},
// Drag Events
onStart: function(el) {
startEl.highlight('#FB911C'); //flashes orange
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //flashes orange
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //flashes orange
}
});
});
</script>
</head>
<body>
<p align = "center">Drag and Drop Application</p>
<div id = "drag_cont">
<div id = "start" class = "indicator"><span>Start</span></div>
<div id = "drag_ind" class = "indicator"><span>Drag</span></div>
<div id = "complete" class = "indicator"><span>Complete</span></div>
<div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
<div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
<div id = "drop_in_droppable" class = "indicator">
<span>Dropped in Droppable Element</span>
</div>
<div id = "drag_me">
<div id = "drag_me_handle"><span>HANDLE</span></div>
</div>
<div id = "drop_here" class = "draggable">
<p align = "center">Droppable Area</p>
</div>
</div>
</body>
</html>
您将收到以下输出，其中，您必须单击"句柄"并拖动它。您现在可以在左侧找到通知指示。
输出
MooTools - 正则表达式
MooTools 提供了一种创建和使用正则表达式 (regex) 的方法。本教程将解释正则表达式的基础知识和极端用法。
让我们讨论一下正则表达式的几种方法。
test()
test() 是一种用于使用输入字符串测试正则表达式的方法。虽然 JavaScript 已经提供了 RegExp 对象以及 test() 函数，但 MooTools 为 RegExp 对象添加了更多功能。让我们举一个例子来了解如何使用 test() 方法。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>
您将收到以下输出 −
输出
忽略大小写
这是正则表达式概念中的重要情况之一。如果您不希望正则表达式区分大小写，可以使用选项"I"调用测试方法。让我们举一个例子来解释正则表达式中的忽略大小写。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value, "i");
if (test_result){
$('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>
您将收到以下输出 −
输出
正则表达式以 '^' 开头
正则表达式 '^'(大写)是一个特殊运算符，可用于检查给定字符串开头的正则表达式。此运算符用作正则表达式的前缀。让我们举一个例子来解释如何使用此运算符。请看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>
您将收到以下输出 −
输出
正则表达式以"$"结尾
正则表达式"$"(美元)是一个特殊运算符，可用于检查给定字符串末尾的正则表达式。此运算符用作正则表达式的后缀。让我们举一个例子来解释如何使用此运算符。请看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>
您将收到以下输出 −
输出
字符类
字符类是正则表达式的一个阶段，允许您匹配特定字符(A 或 Z)或字符范围(A — Z)。例如，您想要测试字符串中是否存在单词 foo 和 zoo，类允许您通过将字符放在带有正则表达式的方括号 [] 中来执行此操作。查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match_2').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched");
} else {
$('regex_2_result').set('html', "Not Match");
}
}
var regex_demo_3 = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match_3').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_3_result').set('html', "Matched");
} else {
$('regex_3_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1);
$('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1"/>
<input type = "button" id = "regex_1" value = "Match"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
Reg Exp 2: <input type = "text" id = "regex_match_2"/>
<input type = "button" id = "regex_2" value = "Match"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
Reg Exp 3: <input type = "text" id = "regex_match_3"/>
<input type = "button" id = "regex_3" value = "Match"/>
<Lable id = "regex_3_result"></Lable>
</body>
</html>
您将收到以下输出 −
输出
escapeRegExp()
此方法用于在使用正则表达式检查给定字符串时忽略其中的转义字符。通常，转义字符是 −
- . * + ? ^ $ { } ( ) | [ ] / \
让我们举一个例子，其中我们有一个给定的字符串，如"[check-this-stuff] it is $900"。如果要获取整个字符串，则必须像这样声明它 — "\[check\-this\-stuff\] it is \$900"。系统只接受这种模式。我们在 MooTools 中不使用 escakpe 字符模式。我们有 escapeRegExp() 方法来忽略转义字符。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match_1').get('value');
regex_value = regex_value.escapeRegExp();
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched");
} else {
$('regex_2_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1);
$('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1" size = "6"/><br/><br/>
<input type = "button" id = "regex_1" value = "With escapeRegExp()"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
<input type = "button" id = "regex_2" value = "Without escapeRegExp()"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
</body>
</html>
您将收到以下输出 −
输出
MooTools - 周期
MooTools 提供了一个支持周期的选项。通过这个选项，它可以以相同的时间频率定期调用一个函数。让我们讨论一下周期的方法和特性。
periodical()
此方法用于以相同的时间频率定期调用一个函数。我们需要在开始时定义几件事。一个是你定期运行的函数，第二个是你想要调用函数的频率的数值(以毫秒为单位的数值)。让我们举一个例子来解释一个函数是如何每 100 毫秒执行一次的。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var periodicalFunction = function(){
document. writeln("www.tutorialspoint.com");
}
window.addEvent('domready', function() {
//number at the end indicates how often to fire, measure in milliseconds
var periodicalFunctionVar = periodicalFunction.periodical(100);
});
</script>
</head>
<body>
</body>
</html>
您将收到以下输出 −
输出
元素作为第二个变量
periodical 函数还绑定了第二个变量，该变量位于 domready 函数 () 之外。您可以将元素作为第二个变量绑定到要定期引发的函数中。查看以下语法以了解如何传递变量。
语法
window.addEvent('domready', function() {
//将某些内容传递给 var
var passingVar = $('elementID');
//现在 periodicalFunction 将能够使用"this"来引用"passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passingVar);
});
此处 passingVar 是保存 html 元素的元素变量。该变量作为第二个变量传递给 periodical 函数 periodicalFunctionVar。
$Clear()
$此方法用于停止 periodical 函数。此方法有助于重置 periodical 变量值。查看以下语法以了解如何使用 $clear() 函数。
语法
//我们清除传递给函数和 periodical 的变量 $clear(periodicalFunctionVar);
MooTools - 滑块
滑块是一种在滑动旋钮或任何按钮时反映操作的功能。您可以在定义元素、处理程序、选项和回调事件的同时创建自己的滑块。让我们进一步讨论滑块。
创建新滑块
我们首先必须为滑块选择合适的 HTML 元素。在考虑基本思想时，div 元素最适合滑块，因为使用 div，我们可以创建子元素。我们现在必须为这些 div 设置 CSS，以使 div 结构成为完美的滑块。这里，父 div 用于 滑块，子 div 用于 旋钮。
我们现在必须将这些 div 用作滑块，方法是将元素作为 sliderObject 和 knobObject 传递给滑块构造函数。查看以下定义滑块的语法。
语法
var SliderObject = new Slider(sliderObject , knotObject , [,options,],..);
我们还必须定义滑块选项。
滑块选项
让我们讨论一下用于滑块的几个选项。
Snap
snap 值可以是 true 或 false。这决定了滑块在沿着滑块拖动时是否与步骤对齐。默认情况下，它是 false。
偏移
这是滑块与起始位置的相对偏移。尝试尝试一下。默认情况下，它是 0。
范围
这是一个非常有用的选项。您可以设置步数将分成的数字范围。例如，如果您的范围是 [0, 200]，并且您有 10 个步数，则步数将相隔 20。范围还可以包括负数，例如 [-10, 0]，这在反转滚动时非常有用。默认情况下，它是 false。
滚轮
将滚轮设置为 true，滚动器将识别鼠标滚轮事件。使用鼠标滚轮时，您可能需要调整范围以确保鼠标滚轮事件不会出现反转(同样，稍后会详细介绍)。
步数
默认的 100 步数非常有用，因为它很容易用作百分比。但是，您可以在合理范围内设置尽可能多的步数(可用的步数)。默认情况下，它是 100。
模式
模式将定义滑块是否将自身注册为垂直或水平。但是，从水平和垂直转换还有一些必要的步骤。默认情况下，它是水平的。
回调事件
Slider 提供三个重要的回调事件。
onChange
当前步骤中的任何变化都会触发事件的执行。查看下面给出的示例以了解它何时执行。
onTick
手柄位置的任何变化都会触发此事件的执行。查看下面给出的示例以了解它执行了什么。
onComplete
每当松开手柄时，此事件就会执行。查看下面给出的示例以了解其何时执行。
示例
以下示例解释了水平和垂直滑块以及事件指示器。查看以下代码。
<!DOCTYPE html>
<html>
<head>
<style "text/css">
#slider {
width: 200px;
height: 20px;
background-color: #0099FF;
}
#knob {
width: 20px;
height: 20px;
background-color: #993333;
}
#sliderv {
width: 20px;
height: 200px;
background-color: #0099FF;
}
#knobv {
width: 20px;
height: 20px;
background-color: #993333;
}
#change{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
#complete{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var SliderObject = new Slider('slider', 'knob', {
//options
range: [0, 10],
snap: false,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
//callback events
onChange: function(step){
$('change').highlight('#F3F825');
$('steps_number').set('html', step);
},
onTick: function(pos){
$('tick').highlight('#F3F825');
$('knob_pos').set('html', pos);
//this line is very necessary (left with horizontal)
this.knob.setStyle('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825')
$('steps_complete_number').set('html', step);
this.set(step);
}
});
var SliderObjectV = new Slider('sliderv', 'knobv', {
range: [-10, 0],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'vertical',
onChange: function(step){
$('stepsV_number').set('html', step*-1);
}
});
//sets the vertical one to start at 0
//without this it would start at the top
SliderObjectV.set(0);
//sets the slider to step 7
$('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});
</script>
</head>
<body>
<div id = "slider">
<div id = "knob"></div>
</div><br/><br/>
<div id = "sliderv">
<div id = "knobv"></div>
</div><br/>
<span id = "stepsV_number"></span> <br/>
<div id = "change" class = "indicator">
<strong>onChange</strong><br/>
Passes the step you are on: <span id = "steps_number"></span>
</div></br/>
<div id = "complete" class = "indicator">
<strong>onComplete</strong><br />
passes the current step: <span id = "steps_complete_number"></span>
</div>
</body>
</html>
输出
点击水平或垂直滑块上的棕色旋钮并拖动它，您将看到每个动作的步骤位置和事件指示。
MooTools - Sortables
Sortables 是 Web 开发中的一项高级功能，可以真正为您的用户界面设计打开更多选择。它还包括一个名为"serialize"的强大函数，该函数管理元素 ID 列表，对服务器端脚本非常有用。
创建新的可排序对象
首先，我们将项目列表发送到变量。如果您想要项目列表的数组，则将所有集合分配给变量。最后，将该变量传递给可排序的构造函数。查看以下语法以创建可排序对象。
语法
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);
以下是语法的 HTML 代码。
语法
<ul id = "listA"> <li>Item A1</li> <li>Item A2</li> <li>Item A3</li> <li>Item A4</li> </ul> <ul id = "listB"> <li>Item B1</li> <li>Item B2</li <li>Item B3</li> <li>Item B4</li> </ul>
Sortables 选项
Sortable 提供不同的选项来自定义可排序对象。让我们讨论一下这些选项。
约束
此选项确定列表元素是否可以在可排序对象内的 ul 之间跳转。例如，如果可排序对象中有两个 ul，则可以通过设置"constrain: true"将列表项"约束"到其父 ul。查看以下设置约束的语法。
语法
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false 为默认值
});
克隆
此选项可帮助您在光标下创建一个克隆元素。它有助于对列表元素进行排序。查看 clone 的以下语法。
语法
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false 为默认值
});
Handle
Handle 是一个接受元素作为拖动手柄的选项。每当您希望列表项可选或希望列表中有任何操作时，这都很有用。如果您不提供任何变量，默认情况下将被视为 false。查看使用 handle 的以下语法。
语法
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});
不透明度
此选项可让您调整排序元素。如果您使用克隆，不透明度会影响排序的元素。
语法
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //默认值为 1
});
恢复
此选项接受"false"或任何 Fx 选项。如果您在恢复中设置 Fx 选项，它将创建一个效果，使排序元素稳定到位。查看以下恢复语法。
语法
var sortableLists = new Sortables(sortableListsArray, {
revert: false //这是默认值
});
//您还可以设置 Fx 选项
var sortableLists = new Sortables(sortableListsArray, {
revert: {
duration: 50
}
});
Snap
此选项可让您查看在元素开始跟随之前用户将鼠标拖动多少像素。
语法
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //用户必须拖动 10 像素才能开始列表排序
});
可排序事件
可排序提供了以下简单易懂的事件。
onStart − 在拖动开始时执行(一旦 snap 结束)
onSort − 在项目更改顺序时执行
onComplete − 在将元素放到适当位置时执行
可排序方法
以下可排序方法本质上是属于类的函数 −
detach()
使用 detach()，您可以"分离"所有当前句柄，使整个列表对象不可排序。这对于禁用排序很有用。
attach()
此方法将"附加"排序项的句柄，用于在 detach() 之后启用排序。
addItems()
这允许您将新项目添加到可排序列表中。假设您有一个可排序列表，用户可以在其中添加新项目，一旦您添加了该新项目，您将需要对该新项目启用排序。
removeItems()
此方法允许您删除可排序列表中项目的排序功能。当您想锁定特定列表中的特定项目而不让其与其他项目排序时，这很有用。
addLists()
您可能希望向可排序对象添加整个新列表，而不仅仅是将新项目添加到现有列表。此方法允许您添加多个列表，从而非常容易添加更多可排序项。
removeLists()
让我们从可排序对象中删除列表。当您想要锁定特定列表时，这很有用。您可以删除列表，使其他列表仍保留在可排序对象中，但锁定已删除列表的内容。
serialize()
所有这些排序都很棒，但是如果您想对数据进行某些操作怎么办? .serialize(); 将返回项目 ID 列表及其在列表中的顺序。您可以通过索引号选择从对象中的哪个列表获取数据。
示例
以下示例创建了一个带有编号的 div 元素数组。稍后，使用鼠标指针通过单击、拖放操作重新排列这些元素。看看下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
position: inherit;
}
ul#sortables {
width: 300px;
margin: 0;
padding: 0;
}
li.sortme {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
ul#sortables li {
margin: 10px 0;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
new Sortables($('test'), {
initialize: function(){
var step = 0;
this.elements.each(function(element, i) {
var color = [step, 82, 87].hsbToRgb();
element.setStyle('background-color', color);
step = step + 35;
element.setStyle('height', $random(40, 100));
});
}
});
});
</script>
</head>
<body>
<ul id = "test">
<li class = "sortme">0</li>
<li class = "sortme">1</li>
<li class = "sortme">2</li>
<li class = "sortme">3</li>
<li class = "sortme">4</li>
<li class = "sortme">5</li>
<li class = "sortme">6</li>
<li class = "sortme">7</li>
<li class = "sortme">8</li>
<li class = "sortme">9</li>
<li class = "sortme">10</li>
</ul>
</body>
</html>
您将收到以下输出 −
输出
MooTools - Accordion
Accordion 是 MooTools 提供的最受欢迎的插件。它有助于隐藏和显示数据。让我们进一步讨论它。
创建新的手风琴
手风琴所需的基本元素是切换对及其内容。让我们创建 html 的标题和内容对。
<h3 class = "togglers">Toggle 1</h3> <p class = "elements">Here is the content of toggle 1</p> <h3 class = "togglers">Toggle 2</h3> <p class = "elements">Here is the content of toggle 2</p>
查看以下语法，了解如何基于上述 HTML 结构构建手风琴。
语法
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);
示例
让我们举一个定义手风琴基本功能的示例。查看以下代码。
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);
});
</script>
</head>
<body>
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>
<h3 class = "togglers">Toggle 3</h3>
<p class = "elements">Here is the content of toggle 3</p>
</body>
</html>
您将收到以下输出 −
输出
Accordion 选项
Accordion 提供了大量功能。这些功能有助于调整选项以提供自定义输出。
display
此选项确定在页面加载时显示哪个元素。默认设置为 0，因此显示第一个元素。要设置另一个元素，只需输入与其索引相对应的另一个整数。与"show"不同，display 将转换元素打开。
语法
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});
show
与"display"非常相似，show 决定了页面加载时哪个元素将打开，但"show"不会进行过渡，而是在加载时直接显示内容，不进行任何过渡。
语法
var AccordionObject = new Accordion(toggles, content {
show: 0 //默认为 0
});
height
设置为 true 时，在显示的元素之间切换时将发生高度过渡效果。这是您在上面看到的标准手风琴设置。
语法
var AccordionObject = new Accordion(toggles, content {
height: true //默认为 true
});
width
其作用与 height 选项相同。但是，它不是通过转换高度来显示内容，而是通过转换宽度来显示内容。如果您使用标准设置的"width"(如我们上面所用)，则标题切换之间的空间将保持不变，具体取决于内容的高度。然后，"content"div 将从左向右转换以显示在该空间中。
语法
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});
opacity
此选项确定在隐藏或显示某些内容时是否显示不透明度转换效果。由于我们使用上面的默认选项，您可以在那里看到效果。
语法
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});
fixedHeight
要设置固定高度，您需要固定一个整数(例如，您可以将 100 设置为内容高度为 100px)。如果您计划使用小于内容自然高度的固定高度，则应将其与某种 CSS 溢出属性一起使用。
语法
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});
fixedWidth
与上面的"fixedHeight"一样，如果您为此选项指定一个整数，它将设置宽度。
语法
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //默认值为 false
});
alwaysHide
此选项可让您向标题添加切换控件。将其设置为 true 后，当您单击打开的内容标题时，内容元素将自动关闭，而不会打开任何其他内容。您可以在以下示例中看到执行情况。
语法
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //默认值为 false
});
Accordion 事件
这些事件允许您为 Accordion 的每个操作创建功能。
onActive
这将在您切换打开元素时执行。它将传递切换控制元素和正在打开的内容元素以及参数。
语法
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});
onBackground
当元素开始隐藏并传递所有其他正在关闭但未打开的元素时，执行此操作。
语法
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});
onComplete
这是您的标准 onComplete 事件。它传递一个包含内容元素的变量。
语法
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});
Accordion 方法
这些方法可帮助您创建和操作 Accordion 部分。
addSection()
使用此方法，您可以添加一个部分(一个切换/内容元素对)。它的工作原理与我们见过的许多其他方法一样。首先引用 accordion 对象，使用 .addSection，然后您可以调用标题的 id、内容的 id，最后说明您希望新内容出现在什么位置(0 是第一个位置)。
语法
AccordionObject.addSection('togglersID', 'elementsID', 2);
注意 − 当您添加这样的部分时，虽然它会显示在索引 2 的位置，但实际索引将是 +1 最后一个索引。因此，如果您的数组中有 5 个项目(0-4)，并且您添加了第 6 个项目，则无论您使用 .addSection(); 将其添加到何处，其索引都将为 5
display()
这可让您打开给定元素。您可以通过其索引选择元素(因此，如果您添加了一个元素对并想要显示它，则此处的索引将与上面使用的索引不同。
语法
AccordionObject.display(5); //将显示新添加的元素
示例
以下示例通过一些效果解释了 Accordion 功能。请查看以下代码。
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
color: #222;
margin: 0;
padding: 2px 5px;
background: #EC7063;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 15px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
.ind {
background: #2E86C1;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 20px;
color: aliceblue;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content, {
show: 0,
height : true,
width : false,
opacity: true,
fixedHeight: false,
fixedWidth: false,
alwaysHide: true,
onActive: function(toggler, element) {
toggler.highlight('#DC7633'); //green
element.highlight('#DC7633');
$('active').highlight('#DC7633');
},
onBackground: function(toggler, element) {
toggler.highlight('#AED6F1'); //red
element.highlight('#AED6F1');
$('background').highlight('#F4D03F');
}
});
$('display_section').addEvent('click', function(){
AccordionObject.display(4);
});
});
</script>
</head>
<body>
<div id = "active" class = "ind">onActive</div>
<div id = "background" class = "ind">onBackground</div>
<div id = "accordion_wrap">
<p class = "togglers">Toggle 1: click here</p>
<p class = "elements">Here is the content of toggle 1 Here is the content of
toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
is the content of toggle 1 Here is the content of toggle 1 Here is the content
of toggle 1 Here is the content of toggle 1</p>
<p class = "togglers">Toggle 2: click here</p>
<p class = "elements">Here is the content of toggle 2</p>
<p class = "togglers">Toggle 3: click here</p>
<p class = "elements">Here is the content of toggle 3</p>
<p class = "togglers">Toggle 4: click here</p>
<p class = "elements">Here is the content of toggle 4</p>
</div>
<p>
100
<button id = "display_section" class = "btn btn-primary">
display section
</button>
</p>
</body>
</html>
输出
单击每个切换部分，然后您将找到每个操作的隐藏数据和事件指示器。
MooTools - 工具提示
MooTools 提供不同的工具提示来设计自定义样式和效果。在本章中，我们将学习工具提示的各种选项和事件，以及一些可帮助您从元素中添加或删除工具提示的工具。
创建新的工具提示
创建工具提示非常简单。首先，我们必须创建将附加工具提示的元素。让我们举一个例子，创建一个锚标记并将其添加到构造函数中的 Tips 类。看看下面的代码。
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" rel = "here is the default 'text' for toll tip demo" href = "http://www.tutorialspoint.com">Tool tip _demo</a>
查看用于创建工具提示的代码。
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
示例
以下示例解释了工具提示的基本概念。查看以下代码。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>
您将收到以下输出 −
输出
工具提示选项
提示中只有五个选项，它们都非常容易理解。
showDelay
以毫秒为单位的整数，这将确定用户将鼠标悬停在元素上后工具提示显示的延迟时间。默认值为 100。
hideDelay
与上面的 showDelay 一样，这个整数(也以毫秒为单位)决定用户离开元素后隐藏提示之前要等待多长时间。默认值为 100。
className
这可让您为工具提示包装设置类名。默认值为 Null。
偏移量
这决定了工具提示与元素之间的距离。'x' 表示右偏移量，'y' 表示下偏移量(如果'fixed' 选项设置为 false，则两者均相对于光标，否则偏移量相对于原始元素)。默认值为 x:16，y:16
固定
这可设置当您在元素周围移动时工具提示是否跟随鼠标。如果将其设置为 true，则移动光标时工具提示不会移动，但会相对于原始元素保持固定。默认设置为 false。
工具提示事件
工具提示事件与此类的其余部分一样简单。有两个事件 - onShow 和 onHide，它们的工作方式与您预期的一样。
onShow()
此事件在工具提示出现时执行。如果您设置了延迟，则此事件将不会执行，直到延迟结束。
onHide()
工具提示会随着此事件的执行而隐藏。如果有延迟，则此事件将不会执行，直到延迟结束。
工具提示方法
工具提示有两种方法 - 附加和分离。这样您就可以定位特定元素并将其添加到工具提示对象(从而继承该类实例中的所有设置)或分离特定元素。
attach()
要将新元素附加到工具提示对象，只需声明提示对象，在 .attach() 上添加附加项，最后将元素选择器放在括号 () 内。
语法
toolTips.attach('#tooltipID3');
dettach()
此方法与 .attach 方法一样，但结果完全相反。首先，声明提示对象，然后添加 .dettach()，最后将元素选择器放在 () 内。
语法
toolTips.dettach('#tooltipID3');
示例
让我们举一个解释工具提示的例子。看看下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text',
'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>
您将收到以下输出 −
输出
MooTools - 选项卡式内容
选项卡式内容是指选项卡式区域中存在的内容，并且该内容与列表项相关。每当我们对列表项应用任何操作(如悬停或单击)时，即时反应都会对选项卡式内容产生影响。
让我们进一步讨论选项卡。
创建简单选项卡
创建简单菜单选项卡可帮助您在将鼠标悬停在列表项上时探索其他信息。首先，创建一个包含项目的无序列表，然后创建 div，每个 div 对应一个列表项。让我们看看以下 HTML 代码。
脚本
<!-- here is our menu --> <ul id = "tabs"> <li id = "one">One</li> <li id = "two">Two</li> <li id = "three">Three</li> <li id = "four">Four</li> </ul> <!-- and here are our content divs --> <div id = "contentone" class = "hidden">content for one</div> <div id = "contenttwo" class = "hidden">content for two</div> <div id = "contentthree" class = "hidden">content for three</div> <div id = "contentfour" class = "hidden">content for four</div>
让我们使用 CSS 为上述 HTML 代码提供一些基本支持，以帮助隐藏数据。请查看以下代码。
.hidden {
display: none;
}
现在让我们编写一个展示选项卡功能的 MooTools 代码。请查看以下代码。
示例代码片段
//以下是我们用于更改样式的函数
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//在这里我们将内容元素转换为变量
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
//将事件添加到选项卡
$('one').addEvents({
//设置事件类型
//并将函数与要传递的变量绑定
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
});
$('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});
结合上述代码，您将获得正确的功能。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({
//set up the events types
//and bind the function with the variable to pass
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
});
$('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>
</body>
</html>
输出
将鼠标指针放在列表项上，然后您将获得相应项的其他信息。
Marph 内容选项卡
通过扩展代码，我们可以在显示隐藏内容时添加一些变形功能。我们可以通过使用 Fx.Morph 效果而不是样式来实现这一点。
查看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.hiddenM {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
var showFunction = function() {
//在改变当前样式之前重置所有样式
$$('.hiddenM').setStyles({
'display': 'none',
'opacity': 0,
'background-color': '#fff',
'font-size': '16px'
});
//我们在这里开始变形，并设置变形样式
this.start({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c',
'font-size': '31px'
});
}
window.addEvent('domready', function() {
var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM');
var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM');
//创建变形对象
elOneM = new Fx.Morph(elOneM, {
link: 'cancel'
});
elTwoM = new Fx.Morph(elTwoM, {
link: 'cancel'
});
elThreeM = new Fx.Morph(elThreeM, {
link: 'cancel'
});
elFourM = new Fx.Morph(elFourM, {
link: 'cancel'
});
$('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM));
$('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "oneM">One</li>
<li id = "twoM">Two</li>
<li id = "threeM">Three</li>
<li id = "fourM">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentoneM" class = "hiddenM">content for one</div>
<div id = "contenttwoM" class = "hiddenM">content for two</div>
<div id = "contentthreeM" class = "hiddenM">content for three</div>
<div id = "contentfourM" class = "hiddenM">content for four</div>
</body>
</html>
输出
单击列表中的任意一项，您将在选项卡上获得更多信息。
MooTools - 类
MooTools 包含不同 API 的类。查看使用 MooTools 创建和使用类的基础知识。类是变量和函数集合的容器，这些变量和函数可对这些变量进行操作以执行特定任务。
让我们详细讨论变量、方法和选项。
变量
创建变量是一项非常简单的任务。它就像在哈希中声明键/值对一样。同样，您可以以相同的方式访问变量，即 <class_name.variable>。查看以下在类中创建和访问变量的语法。
语法
//创建一个名为 class_one 的新类
//具有两个内部变量
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
var run_demo_one = function(){
//实例化一个名为 demo_1 的 Class_one 类
var demo_1 = new Class_one();
//显示 demo_one 中的变量
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}
方法
通常，方法是使用属于特定类的一组指令的函数。您可以使用类的实例来调用这些函数。还有一件事，每当你想将实例变量调用到函数中时，你必须使用this关键字。查看以下用于创建和访问方法的语法。
语法
var Class_two = new Class({
variable_one : "I'm First",
variable_two : "I'm Second",
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
var run_demo_2 = function(){
//实例化 class_two 的一个版本
var demo_2 = new Class_two();
//调用 function_one
demo_2.function_one();
//调用 function_two
demo_2.function_two();
}
initialize
initialize 是类对象中的一个选项。这可以帮助您创建类设置。这还可以帮助您设置用户配置选项和变量。查看以下初始化选项的语法。
语法
var Myclass = new Class({
//定义一个带有一个参数的初始化函数
initialize : function(user_input){
//创建一个属于
//此类的值变量并为其分配用户输入的值
//this.value = user_input;
}
})
实现选项
实现选项对于接受用户输入和构建类非常有用。将选项功能添加到您的类就像向您的类的初始化选项中添加另一个键/对一样简单。此设置准备就绪后，您可以通过传递键/值对来覆盖任何或所有默认选项。它提供了 setOptions 方法。此方法允许您在初始化类后设置选项。如果您想从类内部访问变量，请使用以下语法。
语法
var Class_four = new Class({
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : "Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert(this.options.option_one + "
" + this.options.option_two);
},
});
var run_demo_4 = function(){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5.show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
//创建一个新的 class_four 类，并使用
//名为 new_variable 的新选项
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}
MooTools - Fx.Element
Fx.Element 允许您将 Fx 功能添加到单个页面上的多个 dom 元素。实际上，Fx.Element 是 Fx.Morph 插件的扩展。Fx.Element 和 Fx.Morph 之间的唯一区别是语法。在此语法中，start({}) 方法用于创建效果，而 .set({}) 方法用于设置一些样式。
查看以下 Fx.Element 的语法。
语法
var fxElementsArray = $$('.myElementClass');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
}
});
start({}) 和 set({})
Start 和 set 关键字结构用于启动和设置样式。但在此结构中，您通过索引引用元素 — 第一个元素为 0，第二个元素为 1，依此类推。请查看以下 Start 和 Set 结构的语法。
语法
//您可以使用 .set({...}) 设置样式
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
//或使用 .start({...}) 创建过渡效果
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
示例
让我们举一个例子来解释 Fx.Element。看看下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var startFXElement = function(){
this.start({
'0': {
'height': [50, 100],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 300,
'background-color': '#333'
},
'1': {
'width': 300,
'border': '10px solid #DC1E6D'
}
});
}
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass');
var startInd = $('start_ind');
var cancelInd = $('cancel_ind');
var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
},
onCancel: function(){
cancelInd.highlight('#C3E608');
},
onComplete: function(){
completeInd.highlight('#C3E608');
},
onChainComplete: function(){
chainCompleteInd.highlight('#C3E608');
}
});
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){
fxElementsObject.pause();
});
$('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});
</script>
</head>
<body>
<div id = "start_ind" class = "ind">onStart</div>
<div id = "cancel_ind" class = "ind">onCancel</div>
<div id = "complete_ind" class = "ind">onComplete</div>
<div id = "chain_complete_ind" class = "ind">onChainComplete</div>
<span id = 'buttons'>
<button id = "fxstart">Start A</button>
<button id = "fxstartB">Start B</button>
<button id = "fxset">Reset</button>
<button id = "fxpause">Pause</button>
<button id = "fxresume">Resume</button>
</span>
<div class = "myElementClass">Element 0</div>
<div class = "myElementClass">Element 1</div>
</body>
</html>
您将收到以下输出 −
输出
MooTools - Fx.Slide
Fx.Slides 是一个选项，可让您通过滑入视图来显示内容。它非常简单，但可以增强 UI 的外观。
让我们讨论如何创建和初始化 Fx.Slide、其选项和方法。
首先，我们将使用用户定义的实例初始化 Fx.Slide 类。为此，我们必须创建并选择一个 HTML 元素。之后，我们将对这些元素应用 CSS。最后，我们将使用元素变量启动 Fx.Slide 的新实例。
Fx.Slide 选项
只有两个 Fx.Slide 选项 - 模式和包装器。
模式
模式为您提供两个选择，"垂直"或"水平"。垂直显示从上到下，水平显示从左到右。没有从下到上或从右到左的选项，但我知道破解类本身来实现这一点相对简单。在我看来，这是一个我希望看到的标准选项，如果有人破解了类以允许此选项，请给我们留言。
包装器
默认情况下，Fx.Slide 会在幻灯片元素周围放置一个包装器，使其为"溢出":"隐藏"。包装器允许您将另一个元素设置为包装器。就像我上面说的，我不清楚这在什么情况下有用，并有兴趣听听任何想法(感谢 mooforum.net 的 horseweapon 帮助我澄清这个问题)。
Fx.Slide 方法
Fx.Slide 还具有许多显示和隐藏元素的方法。
slideIn()
顾名思义，此方法将触发开始事件并显示您的元素。
slideOut()
将您的元素滑回隐藏状态。
toggle()
这将根据元素的当前状态将其滑入或滑出。添加到点击事件的非常有用的方法。
hide()
这将隐藏没有幻灯片效果的元素。
show()
这将显示没有幻灯片效果的元素。
Fx.Slide 快捷方式
Fx.Slide 类还提供了一些方便的快捷方式，用于向元素添加效果。
set('slide')
如果您在元素上"设置"幻灯片，则可以创建一个新实例，而不是启动新类。
语法
slideElement.set('slide');
设置选项
您甚至可以使用快捷键 − 设置选项
语法
slideElement.set('slide', {duration: 1250});
slide()
一旦幻灯片被 .set()，您就可以使用 .slide() 方法启动它。
语法
slideElement.slide('in');
.slide 将接受 −
- 'in'
- 'out'
- 'toggle'
- 'show'
- 'hide'
…每个都对应于上面的方法。
示例
让我们举一个解释 Fx.Slide 的例子。看看下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #F9E79F;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var slideElement = $('slideA');
var slideVar = new Fx.Slide(slideElement, {
//Fx.Slide Options
mode: 'horizontal', //default is 'vertical'
//wrapper: this.element, //default is this.element
//Fx Options
link: 'cancel',
transition: 'elastic:out',
duration: 'long',
//Fx Events
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide().show().hide(); //note, .hide and .show do not fire events
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
});
//EXAMPLE B
var slideElementB = $('slideB');
var slideVarB = new Fx.Slide(slideElementB, {
//Fx.Slide Options
mode: 'vertical', //default is 'vertical'
link: 'chain',
//Fx Events
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
});
</script>
</head>
<body>
<div id = "start" class = "ind">Start</div>
<div id = "cancel" class = "ind">Cancel</div>
<div id = "complete" class = "ind">Complete</div>
<button id = "openA">open A</button>
<button id = "closeA">close A</button>
<div id = "slideA" class = "slide">Here is some content - A. Notice the delay
before onComplete fires. This is due to the transition effect, the onComplete
will not fire until the slide element stops "elasticing." Also, notice that
if you click back and forth, it will "cancel" the previous call and give the
new one priority.</div>
<button id = "openB">open B</button>
<button id = "closeB">close B</button>
<div id = "slideB" class = "slide">Here is some content - B. Notice how
if you click me multiple times quickly I "chain" the events. This slide is
set up with the option "link: 'chain'"</div>
</body>
</html>
输出
点击按钮 — 开盘、平盘、开盘、平盘D。观察指标上的变化、效果和事件通知。
MooTools - Fx.Tween
MooTools 为不同的过渡提供了不同的 FX.Tween 快捷方式，例如转换为平滑动画过渡的闪烁效果。让我们讨论一下 Tween 快捷方式中的几种方法。
tween()
此方法在两个样式属性值之间提供平滑过渡。让我们举一个例子，使用 tween 方法将 div 的宽度从 100px 更改为 300px。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var tweenFunction = function(){
$('body_div').tween('width','300px');
}
window.addEvent('domready', function() {
$('tween_button').addEvent('click', tweenFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
</body>
</html>
您将收到以下输出 −
输出
fade()
此方法调整元素不透明度或透明度。让我们举一个例子，其中我们使用 MooTools 提供一个按钮来调整 div 的不透明度。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/JavaScript">
var fadeFunction = function(){
$('body_div').fade('.5');
}
window.addEvent('domready', function() {
$('fade_button').addEvent('click', fadeFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "fade_button" value = "fade to 50%"/>
</body>
</html>
您将收到以下输出 −
输出
点击淡化至 50% 按钮可将 div 不透明度降低至 50%。
highlight()
此方法使用不同的背景颜色突出显示元素。它包含 Tween Flash 的两个主要功能。
在第一个功能中，Tween Flash 用于将不同的背景颜色应用于元素。
一旦 Tween Flash 设置了不同的背景颜色，它就会切换到另一种背景颜色。
此方法用于在选择后突出显示元素。让我们举一个例子来理解这个方法。看看下面的代码。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
#div2 {
width: 100px;
height: 100px;
background-color: #145A32;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var highlightFunction = function(){
$('div1').highlight('#eaea16');
}
var highlightChangeFunction = function(){
$('div2').highlight('#eaea16', '#FBFCFC');
}
window.addEvent('domready', function() {
$('div1').addEvent('mouseover', highlightFunction);
$('div2').addEvent('mouseover', highlightChangeFunction);
});
</script>
</head>
<body>
<div id = "div1"> </div><br/>
<div id = "div2"> </div>
</body>
</html>
您将收到以下输出 −
输出
尝试将鼠标指针保持在彩色 div 上，并观察 Flash 高亮中的变化。
MooTools - Fx.Morph
Fx.Morph 是 MooTools 提供的一个函数。它用于创建新的补间，用于在样式属性之间进行过渡。在变形时，我们必须选择带有对象的元素，然后才能对其应用不同的函数。我们还需要将元素与新创建的补间绑定。
让我们举一个在网页上提供三个按钮的示例。第一个是 SET 按钮，它创建具有高度、宽度和颜色等样式属性的元素。第二个是 MORPH 按钮，它更改元素的样式属性。第三个是 RESET 按钮，它将所有设置更改为起始位置。请看以下代码。
示例
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element');
var morphObject = new Fx.Morph(morphElement);
$('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject));
$('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>
您将收到以下输出 −
输出
MooTools - Fx.Options
MooTools 提供了不同的 Fx.Options，它们将有助于 Fx.Tween 和 Fx.Morph。这些选项将让您控制效果。
让我们讨论一下 MooTools 提供的一些选项。在继续之前，请先查看以下用于设置选项的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
//首先声明选项的名称
//放置 :
//然后定义您的选项
});
fps(每秒帧数)
此选项确定变形时动画中每秒的帧数。我们可以将这些 fps 应用于 Morph 或 Tween 功能。默认情况下，fps 的值为 50。这意味着任何功能在变形时都将以每秒 50 帧的速度运行。
示例
让我们举一个例子，我们将使用 5 fps 变形一个 div 元素。看看下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
#morph_element {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element');
var morphObject = new Fx.Morph(morphElement, {
fps: 5
});
$('start').addEvent('click', morphStart.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "start"value = "START"/>
</body>
</html>
您将收到以下输出 −
输出
点击START按钮找到变形动画。这有助于我们观察动画使用的帧数。使用不同的fps值来获取动画的差异。建议使用小于10的fps值。这将帮助您轻松获得差异。
unit
此选项用于设置数字的单位类型。通常，我们有三种不同类型的单位——px、%和ems。看看下面的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
上述语法是将百分比分配给单位。这意味着数字中的所有值都被视为百分比。
link
此选项提供了一种管理多个调用以启动动画的方法。如果您一次应用多个事件调用，这些调用将被视为链接调用。第一个调用完成后，第二个调用将自动执行。它包含以下三个选项 −
ignore − 这是默认选项。它会忽略任意数量的调用，直到完成效果。
cancel − 当有另一个效果时，这会取消当前效果。它遵循最新的调用优先级。
Chain − 这可让您将效果链接在一起并维护调用堆栈。它会执行所有调用，直到它执行完堆栈中的所有链式调用。
查看以下使用链接选项的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
持续时间
此选项用于定义动画的持续时间。例如，如果您希望一个对象在 1 秒的持续时间内移动 100px，那么它将比一个对象在 1 秒内移动 1000px 的速度慢。您可以输入一个以毫秒为单位的数字。或者，您可以使用这三个选项中的任何一个来代替数字。
- 短 = 250 毫秒
- 正常 = 500 毫秒(默认)
- 长 = 1000 毫秒
查看以下使用持续时间的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
或者，
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
过渡
此选项用于确定过渡类型。例如，它应该是一个平滑的过渡，还是应该从缓慢开始，然后在结束时加速。查看以下语法以应用过渡。
语法
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
下表描述了不同类型的过渡。
| S.No. | 过渡类型 &描述 |
|---|---|
| 1 |
显示具有 in、out、in-out 事件的线性过渡 |
| 2 |
显示具有 in、out、in-out 事件的二次过渡 |
| 3 |
显示具有 in、out、in-out 事件的立方过渡 |
| 4 |
显示具有 in、out、in-out 事件的四分过渡 |
| 5 |
显示具有 in、out、in-out 事件的五分过渡事件 |
| 6 |
用于生成具有 in、out、in-out 事件的 Quad、Cubic、Quart 和 Quint |
| 7 |
显示具有 in、out、in-out 事件的指数转换 |
| 8 |
显示带有 in、out、in-out 事件的圆形过渡 |
| 9 |
显示带有 in、out、in-out 事件的正弦过渡 |
| 10 |
使用 in、out、in-out 事件使过渡返回，然后全部前进 |
| 11 |
使用 in、out、in-out 事件使过渡有弹性 |
| 12 |
使用 in、out、in-out 事件进行弹性曲线过渡 |
MooTools - Fx.Events
Fx.Events 提供了一些选项，用于在整个动画效果的不同级别上引发一些代码。它为您提供了对补间和变形的控制。Fx.Events 提供的选项 −
onStart − 它将引发 Fx 启动时执行的代码。
onCancel − 它将引发 Fx 取消时执行的代码。
onComplete − 它将引发 Fx 完成时执行的代码。
onChainComplete −将在链接的 Fx 完成时引发要执行的代码。
示例
让我们举一个例子，其中网页上有 div。我们继续将事件方法应用于 div。第一个方法是 onStart() 方法，当鼠标指针进入 div 区域时突出显示 div。
第二个是 onComplete() 方法，当鼠标指针离开 div 区域时突出显示 div。当鼠标指针自动进入 div 区域时，div 大小会增加 400px。我们将尝试使用 Fx.Events 方法执行所有这些功能。看看下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
#quadin {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadinout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var enterFunction = function() {
this.start('width', '400px');
}
var leaveFunction = function() {
this.start('width', '200px');
}
window.addEvent('domready', function() {
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new Fx.Tween(quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new Fx.Tween(quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
$('quadin').addEvents({
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({
'mouseenter': enterFunction.bind(quadOut),
'mouseleave': leaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
});
</script>
</head>
<body>
<div id = "quadin"> Quad : in</div><br/>
<div id = "quadout"> Quad : out</div><br/>
<div id = "quadinout"> Quad : in-out</div><br/>
</body>
</html>
您将收到以下输出 −
