- MooTools 教程
- MooTools - 首页
- MooTools - 简介
- MooTools - 安装
- MooTools - 程序结构
- MooTools - 选择器
- MooTools - 使用数组
- MooTools - 函数
- MooTools - 事件处理
- MooTools - DOM 操作
- MooTools - 样式属性
- MooTools - 输入过滤
- MooTools - 拖放
- MooTools - 正则表达式
- MooTools - 定期执行
- MooTools - 滑块
- MooTools - 可排序列表
- MooTools - 手风琴
- MooTools - 工具提示
- MooTools - 标签内容
- MooTools - 类
- MooTools - Fx.Element
- MooTools - Fx.Slide
- MooTools - Fx.Tween
- MooTools - Fx.Morph
- MooTools - Fx.Options
- MooTools - Fx.Events
- MooTools 有用资源
- MooTools 快速指南
- MooTools - 有用资源
- MooTools - 讨论
MooTools 快速指南
MooTools - 简介
MooTools 是一个面向对象、轻量级的 JavaScript 框架。MooTools 的全称是 My Object-Oriented Tools。它是在免费的开源 MIT 许可证下发布的。它是最流行的 JavaScript 库之一。
MooTools 是一个强大、轻量级的 JavaScript 库。它在 Web 开发中创建了 JavaScript 的简单交互。它还可以作为 CSS 扩展做很多事情。MooTools 拥有各种巧妙的扩展，使您能够创建动画效果。
MooTools 的组件
MooTools 包括许多组件。以下是不同的组件类别：
核心 - 所有其他组件都需要的一组实用程序函数。
更多 - 官方的附加组件集合，扩展核心并提供增强的功能。
类 - 类对象实例化的基础库。
原生 - JavaScript 原生对象增强集合。原生添加了功能、兼容性和简化编码的新方法。
元素 - 包含大量对 HTML 元素对象的增强和兼容性标准化。
FX - 一个高级效果 API，有助于动画页面元素。
请求 - 包括 XHR 接口、Cookie JSON 和 HTML 检索特定工具，供开发人员利用。
窗口 - 为特定于客户端的信息（如窗口的尺寸）提供跨浏览器接口。
MooTools – 优点
与原生 JavaScript 相比，MooTools 具有许多优点。这些优点包括：
MooTools 是一个广泛且模块化的框架，允许开发人员创建他们自己的自定义组件组合。
MooTools 遵循面向对象范式和 DRY 原则（不要重复自己）。
MooTools 提供高级组件效果，并具有优化的过渡效果。它主要用于 Flash 开发人员。
MooTools 为 DOM 提供了不同的增强功能。这有助于开发人员添加、修改、选择和删除 DOM 元素。而且，它还支持存储和检索元素存储。
MooTools - 安装
MooTools 是一个强大的 JavaScript 库，用于使用面向对象范式设计 DOM 对象。本章说明了如何安装和使用 MooTools 库以及 JavaScript。
要安装 MooTools 库，请按照以下步骤操作：
步骤 1：下载 MooTools 核心库和 MooTools More 库
您可以从以下链接下载 MooTools 核心库和 MooTools More 库的最新版本 MooTools-Core 和 MooTools-More。当您点击链接时，您将在浏览器中看到以下屏幕：
并且，
点击下载按钮，您将获得 MooTools 库的最新版本。在本教程中，我们使用的是 MooTools-Core-1.6.0.js 和 MooTools-More-1.6.0.js 库。
步骤 2：将 MooTools 核心库和 More 库上传到服务器
您现在在文件系统中拥有 MooTools 库。我们必须将这些库复制到服务器（工作区），应用程序网页可在该服务器上访问。在本教程中，我们使用的是 C:\MooTools\workspace\ 目录位置。
因此，将 MooTools-Core-1.6.0.js 和 MooTools-More-1.6.0.js 文件复制到给定的目录位置。
步骤 3：将 MooTools 核心库和 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 的模型。为此，我们需要声明属性 - 宽度和高度。
请查看以下代码，并将其保存到 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，请使用以下语法：
语法
//selects the element with the 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，请使用以下语法：
语法
//all divs in the page
$$('div');
如果要选择具有相同 id 名称的多个 div，请使用以下语法：
语法
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');
getElements()
getElements() 方法类似于 getElement() 方法。此方法根据条件返回所有元素。您可以使用元素名称 (a、div、input) 选择这些集合，或者使用特定元素类名选择相同类的元素集合。
使用运算符包含和排除结果
MooTools 支持用于细化选择的不同运算符。您可以在 getElements() 方法中使用所有这些运算符。每个运算符都可以用于按名称选择输入元素。
请查看下表。它定义了 MooTools 支持的不同运算符。
| 运算符 | 描述 | 示例 |
|---|---|---|
| =（等于） | 按名称选择输入元素。 | $('body_wrap').getElements ('input[name = phone_number]'); |
| ^=（以开头） | 通过比较名称的开头字母来选择输入元素。 | $('body_wrap').getElements ('input[name^=phone]'); |
| $=（以结尾） | 通过比较名称的结尾字母来选择输入元素。 | $('body_wrap').getElements ('input[name$ = number]'); |
| !=（不等于） | 取消选择输入元素，按名称。 | $('body_wrap').getElements ('input[name!=address]'); |
| *=（包含） | 选择包含特定字母模式的输入元素。 | $('body_wrap').getElements ('input[name*=phone]'); |
基于元素顺序的选择器
MooTools 选择器在元素选择中遵循特定顺序。选择器主要遵循两种顺序；一种是偶数，另一种是奇数。
注意 - 此选择器从 0 开始，因此第一个元素是偶数。
偶数顺序
在此顺序中，选择器选择以偶数顺序放置的元素。使用以下语法选择 HTML 页面中的所有偶数 div。
语法
// selects all even divs
$$('div:even');
奇数顺序
在此顺序中，选择器选择以奇数顺序放置的元素。使用以下语法选择 HTML 页面中的所有奇数 div。
语法
// selects all odd divs
$$('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');
// set the title attribute of every element
// to it's text in lowercase
$$('ul > li').each(function(item){
item.set('title', item.get('text').toLowerCase());
});
// the function we'll call when the user types
var filterList = function(){
var value = input.value.toLowerCase();
$$('li').setStyle('display','none');
// check the title attribute if it contains whatever the user is typing
$$('ul > li[title*=' + value + ']').setStyle('display','');
};
// make it happen
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()方法。请查看以下脚本。
脚本
//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');
//first add your element to a var
var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);
现在，myArray包含div和span元素。
combine()
此方法用于将一个数组的元素与另一个数组的元素合并。它还会处理重复内容。例如，考虑以下HTML代码，它包含两个div元素和两个span元素，它们位于一个封闭的div（body_div）下。
语法
<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方法()。请查看以下脚本。
脚本
//create your array just like we did before
var myArray= $('body_wrap').getElements('div');
//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');
//then combine newArrayToArray with 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中使用函数。通常，最好将函数保存在页面主体外部的script标签中。在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(){
//put whatever you want to happen in here
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>
您将收到以下输出：
输出
当您单击按钮时，您将收到以下消息：
This button element recognizes the click event
鼠标进入和鼠标离开
鼠标进入和鼠标离开是事件处理中最常见的事件。操作基于鼠标的位置。如果鼠标的位置进入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(){
//put whatever you want to happen in here
$('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(){
//put whatever you want to happen in here
$('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
删除事件
此方法用于删除事件。删除事件与添加事件一样容易，并且遵循相同的结构。请查看以下语法。
语法
//works just like the previous examplesuse .removeEvent method
$('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方法的语法。
语法
//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');
在使用get()方法检索元素时，您将收到以下属性列表。
- id
- name
- value
- href
- src
- class（如果元素存在，将返回所有类）
- text（元素的文本内容）
set()
此方法用于将值设置为变量。这在与事件结合使用时非常有用，并且允许您更改值。以下语句是set方法的语法。
语法
//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');
erase()
此方法帮助您擦除元素属性的值。您需要选择要从元素中擦除哪个属性。以下语句是erase()方法的语法。
语法
//this will erase the href value of #id_name
$('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中的inject()方法，我们可以将顺序从ABC更改为ACB。这意味着，我们需要将elementB放在elementC之后，并将elementC放在elementB之前。请查看以下代码。
示例
<!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: 'https://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的背景颜色的例子。请查看以下语法。
语法
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');
多个样式属性
MooTools库包含不同的方法，用于设置或获取特定样式属性或多个样式属性的值。
setStyle()
如果要在一个元素或一组元素上设置多个样式属性，则必须使用setStyle()方法。请查看setStyle()方法的以下语法。
语法
$('<element-id>').setStyles({
//use different style properties such as width, height, background-color, etc.
});
示例
<!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() 方法用于将红、绿、蓝值转换为十六进制值。此函数处理数字，属于 Array 集合。让我们举一个例子，我们将设计一个网页来输入红色、绿色和蓝色的各个值。提供一个按钮将所有三个值转换为十六进制值。请查看以下代码。
示例
<!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() 方法之前和之后字符串的差异。
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 Options
droppables: dropElement,
container: dragContainer,
// Drag Options
handle: dragHandle,
// Drag.Move Events
// the Drag.Move events pass the dragged element,
// and the dropped into droppable element
onDrop: function(el, dr) {
//will alert the id of the dropped into droppable element
alert(dr.get('id'));
},
// Drag Events
// Drag events pass the dragged element
onComplete: function(el) {
alert(el.get('id'));
}
});
Drag.Move 选项
Drag.Move 提供以下选项来维护具有拖放功能的 html 元素：
droppable - 这有助于您设置可放置元素的选择器（注册与放置相关的事件的元素）。
container - 这有助于您设置拖动元素的容器（将元素保持在内部）。
snap - 这有助于您设置用户必须拖动光标多少像素才能开始拖动可拖动元素。默认值为 6，您可以将其设置为任何表示数字的变量。
handle - 这有助于您向可拖动元素添加手柄。手柄成为唯一接受抓取的元素。
请查看以下语法，了解如何在何处定义可放置和容器、snap 和手柄元素。
语法
//here we define a single element by id
var dragElement = $('drag_element');
//here we define an array of elements by class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');
//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
// Drag.Move Options
// set up our droppables element with the droppables var we defined above
droppables: dropElements ,
// set up our container element with the container element var
container: dragContainer
// set up pixels the user must drag.
Snap: 10
// Adds a handle to your draggable element
handle: dragHandle
});
Drag.Move 事件
Drag.Move 事件提供不同的函数，这些函数可以在操作的不同级别使用。例如，当您开始拖动或放置对象时，每个 Drag.Move 事件都将拖动的元素或放置的元素作为参数传递。
以下是支持的事件：
onStart()
这会在拖动开始时引发事件。如果您设置了较长的 snap，则此事件在鼠标到达一定距离之前不会引发。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onStart: function(el) {
// put whatever you want to happen on start in here
}
});
onDrag()
在您拖动元素时，此事件会不断引发。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onDrag: function(el) {
// put whatever you want to happen on drag in here
}
});
onDrop()
当您将可拖动元素放到可放置元素中时，此事件会引发。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onDrop: function(el, dr) {
// put whatever you want to happen on drop in here
}
});
onLeave()
当可拖动元素离开可放置元素的边界时，此事件会引发。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onLeave: function(el, dr) {
// put whatever you want to happen on Leave from droppable area in here
}
});
onEnter()
当可拖动元素进入可放置元素区域时，此事件会引发。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onEnter: function(el, dr) {
// this will fire when a draggable enters a droppable element
}
});
onComplete()
此事件会引发。onComplete 指的是您放置可放置元素时，无论您是否落在可放置元素中，它都会引发。请查看以下语法。
语法
var myDrag = new Drag.Move(dragElement , {
// Drag Options
// Drag options will pass the dragged element as a parameter
onComplete: function(el) {
// put whatever you want to happen on complete
}
});
让我们举一个例子，该例子将探讨本章中解释的所有功能。这些功能包括——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>
您将收到以下输出，其中您必须单击 Handle 并将其拖动。您现在可以在左侧找到通知指示。
输出
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”调用 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, "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 中的转义字符模式。我们有 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>
您将收到以下输出：
输出
元素作为第二个变量
周期函数还绑定了一个在 domready 函数() 之外的第二个变量。您可以将元素作为第二个变量绑定到您希望定期引发的函数中。请查看以下语法以了解如何传递变量。
语法
window.addEvent('domready', function() {
//pass something to a var
var passedVar = $('elementID');
//now periodicalFunction will be able to use "this" to refer to "passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});
这里 passedVar 是一个保存 html 元素的元素变量。该变量作为第二个变量传递到周期函数periodicalFunctionVar。
$Clear()
此方法用于停止周期函数。此方法有助于重置周期变量值。请查看以下语法以了解如何使用 $clear() 函数。
语法
//we clear the var that we passed the function and periodical to $clear(periodicalFunctionVar);
MooTools - 滑块
Slider 是一种在滑动旋钮或任何按钮时反映操作的功能。您可以在定义元素、处理程序、选项和回调事件时创建自己的滑块。让我们进一步讨论滑块。
创建新的滑块
首先，我们必须为滑块选择合适的 HTML 元素。在考虑基本思想时，div 元素最适合滑块，因为使用 div，我们可以创建子元素。现在，我们必须为这些 div 设置 CSS，以使 div 结构成为一个完美的滑块。这里，父 div 用于滑块，子 div 用于滑块按钮。
现在，我们必须通过将元素作为sliderObject 和knobObject 传递给 Slider 构造函数，将这些 div 用作滑块。查看以下定义滑块的语法。
语法
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);
我们还必须定义滑块选项。
滑块选项
让我们讨论一些用于滑块的选项。
捕捉
捕捉值可以是 true 或 false 值。这决定了当滑块按钮沿滑块拖动时是否捕捉到步长。默认情况下为 false。
偏移量
这是滑块按钮相对于起始位置的相对偏移量。尝试使用此选项进行实验。默认情况下为 0。
范围
这是一个非常有用的选项。您可以设置一个数字范围，步长将分成该范围。例如，如果您的范围是 [0, 200] 并且您有 10 个步长，则您的步长将相隔 20。范围还可以包含负数，例如 [-10, 0]，这在反转滚动时非常有用。默认情况下为 false。
滚轮
将 wheel 设置为 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 - 可排序列表
可排序列表是 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>
可排序选项
Sortable 提供不同的选项来自定义可排序对象。让我们讨论一下这些选项。
约束
此选项确定列表元素是否可以在可排序对象内的 ul 之间跳转。例如，如果您在可排序对象中具有两个 ul，则可以通过设置“constrain: true”将列表项“约束”到其父 ul。查看以下设置约束的语法。
语法
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});
克隆
此选项可帮助您在光标下创建克隆元素。它有助于对列表元素进行排序。查看以下克隆语法。
语法
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});
句柄
句柄是一个选项，它接受一个元素作为拖动句柄。当您希望列表项可选或希望在列表中执行任何操作时，这很有用。如果您不提供任何变量，则默认情况下它将被视为 false。查看以下使用句柄的语法。
语法
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});
不透明度
此选项允许您调整排序元素。如果您使用克隆，则不透明度会影响排序的元素。
语法
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});
恢复
此选项接受“false”或任何 Fx 选项。如果您在 revert 中设置 Fx 选项，它将为排序元素创建效果以使其就位。查看以下恢复语法。
语法
var sortableLists = new Sortables(sortableListsArray, {
revert: false //this is the default
});
//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
revert: {
duration: 50
}
});
捕捉
此选项可让您查看用户在元素开始跟随之前需要拖动鼠标多少像素。
语法
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});
可排序事件
Sortable 提供以下事件，这些事件简洁明了。
onStart - 拖动开始时执行（一旦捕捉生效）
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 - 手风琴
手风琴是 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>
您将收到以下输出：
输出
手风琴选项
手风琴提供了强大的功能。这些功能有助于调整选项以提供自定义输出。
显示
此选项确定页面加载时显示哪个元素。默认设置为 0，因此第一个元素显示。要设置其他元素，只需输入与之对应的另一个整数即可。与“show”不同，display 将过渡打开元素。
语法
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});
显示
与“display”类似，“show”确定页面加载时将打开哪个元素，但它不是过渡，而是“show”将在不进行任何过渡的情况下仅使内容在加载时显示。
语法
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});
高度
当设置为 true 时，在切换显示的元素之间将发生高度过渡效果。这是您上面看到的标准手风琴设置。
语法
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});
宽度
这与高度选项的工作方式相同。但是，它不是过渡高度以显示内容，而是帮助过渡宽度。如果您将“宽度”与标准设置一起使用（如上所示），则标题切换按钮之间的空间将保持不变，基于内容的高度。“内容”div 然后将从左到右过渡以显示在该空间中。
语法
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});
不透明度
此选项确定在隐藏或显示某些内容时是否显示不透明度过渡效果。由于我们使用的是上面的默认选项，因此您可以在那里看到效果。
语法
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});
固定高度
要设置固定高度，您需要修复一个整数（例如，您可以将 100 用于内容高度为 100px）。如果您计划使用小于内容自然高度的固定高度，则应将其与某种 CSS overflow 属性一起使用。
语法
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});
固定宽度
就像上面的“fixedHeight”一样，如果您为此选项提供一个整数，它将设置宽度。
语法
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});
始终隐藏
此选项允许您向标题添加切换控件。将此设置为 true 后，当您单击打开的内容标题时，内容元素将自动关闭，而不会打开任何其他内容。您可以在以下示例中看到执行情况。
语法
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});
手风琴事件
这些事件允许您为手风琴的每个操作创建您的功能。
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');
}
});
手风琴方法
这些方法可帮助您创建和操作手风琴部分。
addSection()
使用此方法，您可以添加一个部分（一个切换/内容元素对）。它的工作原理与我们看到的许多其他方法类似。首先引用手风琴对象，使用 .addSection，然后您可以调用标题的 ID、内容的 ID，最后说明您希望新内容出现在哪个位置（0 是第一个位置）。
语法
AccordionObject.addSection('togglersID', 'elementsID', 2);
注意 - 尽管像这样添加部分时它将显示在索引 2 的位置，但实际索引将比最后一个索引多 1。因此，如果您的数组中有 5 个项目（0-4）并且您添加了第 6 个，则其索引将为 5，无论您使用 .addSection(); 在哪里添加它。
display()
这允许您打开给定的元素。您可以按其索引选择元素（因此，如果您添加了元素对并希望显示它，则此处与上面使用的索引不同）。
语法
AccordionObject.display(5); //would display the newly added element
示例
以下示例说明了手风琴功能以及一些效果。查看以下代码。
<!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 = "https://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 = "https://tutorialspoint.com">Tool tip _demo</a>
</body>
</html>
您将收到以下输出：
输出
工具提示选项
Tips 中只有五个选项，它们都非常容易理解。
showDelay
一个以毫秒为单位的整数，这将确定用户将鼠标悬停在元素上后工具提示显示之前的延迟。默认设置为 100。
hideDelay
就像上面的 showDelay 一样，这个整数（也以毫秒为单位）决定了用户离开元素后在隐藏提示之前等待多长时间。默认设置为 100。
className
这允许您为工具提示包装设置一个类名。默认设置为 Null。
偏移量
这决定了工具提示将离元素多远。'x' 指的是右侧偏移量，'y' 指的是向下偏移量（两者相对于光标，如果'fixed'选项设置为false，否则偏移量相对于原始元素）。默认为 x: 16, y: 16
Fixed
这设置了当您在元素周围移动时工具提示是否会跟随您的鼠标。如果将其设置为 true，则当您移动光标时，工具提示不会移动，但会相对于原始元素保持固定。默认设置为 false。
工具提示事件
工具提示事件保持简单，就像此类的其余部分一样。有两个事件——onShow 和 onHide，它们的工作方式与您预期的一样。
onShow()
当工具提示出现时，此事件将执行。如果设置了延迟，则此事件将不会在延迟结束后执行。
onHide()
工具提示在此事件执行时隐藏。如果有延迟，则此事件将不会在延迟结束后执行。
工具提示方法
工具提示有两种方法——attach 和 detach。这使您可以定位特定元素并将其添加到工具提示对象（从而继承该类实例中的所有设置）或分离特定元素。
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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://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 代码。请查看以下代码。
示例代码片段
//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)
});
});
组合上述代码后，您将获得正确的功能。
示例
<!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() {
//resets all the styles before it morphs the current one
$$('.hiddenM').setStyles({
'display': 'none',
'opacity': 0,
'background-color': '#fff',
'font-size': '16px'
});
//here we start the morph and set the styles to morph to
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');
//creat morph object
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>。请查看以下创建和访问类中变量的语法。
语法
//Create a new class named class_one
//with two internal variables
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
var run_demo_one = function(){
//instantiate a Class_one class called demo_1
var demo_1 = new Class_one();
//Display the variables inside 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(){
//Instantiate a version of class_two
var demo_2 = new Class_two();
//Call function_one
demo_2.function_one();
//Call function_two
demo_2.function_two();
}
initialize
initialize 是类对象中的一个选项。这有助于您创建类设置，这也有助于您设置用户配置选项和变量。请查看以下 initialize 选项的语法。
语法
var Myclass = new Class({
//Define an initalization function with one parameter
initialize : function(user_input){
//create a value variable belonging to
//this class and assign it the value
//of the 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 + "\n" + 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();
}
//Create a new class_four class with
//a new option called 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 允许您在单个页面上向多个 DOM 元素添加 Fx 功能。实际上 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 结构的语法。
语法
//you can set your styles with .set({...})
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
//or create a transition effect with .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 只有两个选项——mode 和 wrapper。
模式
Mode 为您提供了两种选择，“vertical”或“horizontal”。垂直从上到下显示，水平从左到右显示。虽然没有从下到上或从右到左显示的选项，但我理解自己修改类来实现这一点相对简单。在我看来，这是一个我希望看到的标准选项，如果有人修改了类以允许此选项，请给我们留言。
Wrapper
默认情况下，Fx.Slide 在滑动元素周围添加一个包装器，使其“overflow”：“hidden”。Wrapper 允许您将另一个元素设置为包装器。就像我上面说的，我不清楚这在什么情况下会派上用场，并且有兴趣听取任何想法（感谢 mooforum.net 上的 horseweapon 帮助我澄清了这一点）。
Fx.Slide 方法
Fx.Slide 还提供了许多用于显示和隐藏元素的方法。
slideIn()
顾名思义，此方法将触发 start 事件并显示您的元素。
slideOut()
将您的元素滑动回隐藏状态。
toggle()
这将根据元素的当前状态将其滑动进入或退出。非常有用的方法添加到点击事件中。
hide()
这将隐藏元素，无需滑动效果。
show()
这将显示元素，无需滑动效果。
Fx.Slide 快捷方式
Fx.Slide 类还提供了一些方便的快捷方式，用于向元素添加效果。
set('slide')
无需初始化新类，如果在元素上“设置”slide，则可以创建一个新实例。
语法
slideElement.set('slide');
设置选项
您甚至可以使用快捷方式设置选项 -
语法
slideElement.set('slide', {duration: 1250});
slide()
一旦 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>
输出
点击按钮——openA、closeA、openB 和 closeB。观察指示器上的变化、效果和事件通知。
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 上，并观察闪光突出显示的变化。
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, {
//first state the name of the option
//place a :
//then define your option
});
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 - 这允许您将效果链接在一起并维护调用的堆栈。它会执行所有调用，直到它遍历堆栈中的所有链接调用。
请查看以下使用 link 选项的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
Duration
此选项用于定义动画的持续时间。例如，如果您希望一个对象在 1 秒的持续时间内移动 100px，那么它的速度会比一个在 1 秒内移动 1000px 的对象慢。您可以输入以毫秒为单位的数字。或者，您可以使用以下三个选项之一代替数字。
- Short = 250ms
- Normal = 500ms（默认）
- Long = 1000ms
请查看以下使用 duration 的语法。
语法
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
或者，
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
transition
此选项用于确定过渡类型。例如，它应该是平滑过渡，还是应该缓慢开始然后在结束时加速。请查看以下应用过渡的语法。
语法
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
下表描述了不同类型的过渡。
| 序号 | 过渡类型和描述 |
|---|---|
| 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。我们通过将 Event 方法应用于 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>
您将收到以下输出：