- 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.tw',
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.tw">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.tw">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.tw">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.tw">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.tw">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.tw">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.tw/">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>
您將收到以下輸出：