MooTools-はじめに

MooToolsは、オブジェクト指向の軽量なJavaScriptフレームワークです。 MooToolsの完全な形式は、My Object-Oriented Toolsです。無料のオープンソースMITライセンスの下でリリースされています。最も人気のあるJavaScriptライブラリの1つです。

MooToolsは、強力で軽量なJavaScriptライブラリです。 Web開発でJavaScriptの簡単な相互作用を作成します。また、CSS拡張機能として多くのことを実行できます。 MooToolsには、あらゆる種類の気の利いた拡張機能があり、アニメーション効果を作成できます。

MooToolsのコンポーネント

MooToolsには多くのコンポーネントが含まれています。以下は、さまざまなコンポーネントのカテゴリです-

Core -他のすべてのコンポーネントが必要とするユーティリティ関数のコレクション。
その他-コアを拡張し、拡張機能を提供するアドオンの公式コレクション。
クラス-クラスオブジェクトのインスタンス化のためのベースライブラリ。
ネイティブ-JavaScriptネイティブオブジェクト拡張のコレクション。ネイティブは機能、互換性、およびコーディングを簡素化する新しいメソッドを追加します。
要素-HTML要素オブジェクトに対する多数の機能強化と互換性の標準化が含まれています。
FX -ページ要素のアニメーション化に役立つ高度なエフェクトAPI。
リクエスト-開発者が悪用するためのXHRインターフェース、Cookie JSON、およびHTML検索固有のツールが含まれています。
Window -ウィンドウのサイズなど、クライアント固有の情報へのクロスブラウザインターフェイスを提供します。

MooTools –利点

MooToolsには、ネイティブJavaScriptよりも多くの利点があります。これらの利点は次のとおりです-

MooToolsは、開発者がコンポーネントの独自のカスタマイズされた組み合わせを作成できるようにする、大規模でモジュール式のフレームワークです。
MooToolsは、オブジェクト指向のパラダイムとDRY原則（Do n’t Repeat Yourself）に従います。
MooToolsは、最適化されたトランジションを備えた高度なコンポーネントエフェクトを提供します。主にフラッシュ開発者に使用されます。
MooToolsは、DOMにさまざまな拡張機能を提供します。これにより、開発者はDOM要素を追加、変更、選択、および削除できます。また、要素ストレージの保存と取得もサポートしています。

MooTools-インストール

MooToolsは、オブジェクト指向のパラダイムを使用してDOMオブジェクトを設計するための強力なJavaScriptライブラリです。この章では、MooToolsライブラリをJavaScriptとともにインストールして使用する方法について説明します。

MooToolsライブラリをインストールするには、以下の手順に従ってください-

ステップ1：MooTools CoreおよびMooTools Moreライブラリをダウンロードする

MooTools CoreおよびMooTools Moreライブラリの最新バージョンは、次のリンクhttp://mootools.net/core[MooTools-Core]およびhttp://mootools.net/more/builder[MooTools-More]からダウンロードできます。リンクをクリックすると、ブラウザの次の画面に移動します-

MooTools Core Library

And,

MooTools More Library

ダウンロードボタンをクリックすると、MooToolsライブラリの最新バージョンが取得されます。このチュートリアルでは、 MooTools-Core-1.6.0.js および MooTools-More-1.6.0.js ライブラリーを使用しています。

ステップ2：MooTools Coreおよびその他のライブラリをサーバーにアップロードします

これで、ファイルシステムにMooToolsライブラリが作成されました。これらのライブラリを、アプリケーションWebページが利用可能なサーバー（ワークスペース）にコピーする必要があります。このチュートリアルでは、 C：\ MooTools \ workspace \ ディレクトリの場所を使用しています。

したがって、 MooTools-Core-1.6.0.js および MooTools-More-1.6.0.js ファイルを指定のディレクトリの場所にコピーします。

ステップ3：MooTools Coreおよびその他のライブラリをスクリプトタグにリンクする

JavaScriptライブラリは .js ファイルです。このライブラリをJavaScriptコードに含める場合は、次のようにscriptタグに含めます。次のコードスニペットをご覧ください。

<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ライブラリの簡単な例を説明します。

例

ここでは、クラスを使用してRectangleというモデルを設計します。このために、プロパティ—幅と高さを宣言する必要があります。

次のコードを見て、サンプルに保存します。

<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要素を選択するために使用されます。インタラクティブなWebページを作成する場合は、そのWebページから何らかのデータまたはアクションを選択する必要があります。セレクターは、要素からのHTML要求を介してデータを受信するのに役立ちます。

基本セレクター（＆dollar;）

＆dollar; *は、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（）は単一の要素のみを選択し、複数のオプションがある場合は最初の要素を返します。クラス名を使用して、要素の最初の出現を取得することもできます。しかし、要素の配列は取得しません。

マルチセレクター（＆dollar;＆dollar;）

＆dollar;＆dollar;複数の要素を選択し、それらの複数の要素を配列に配置するために使用されます。その配列から、さまざまな方法でリストを操作、取得、および並べ替えることができます。次の構文を見てください。 Webページ上の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（）メソッドに似ています。このメソッドは、基準に従ってすべての要素を返します。 * element name（a、div、input）を使用してそれらのコレクションを選択するか、特定の要素 *class name を使用して同じクラスの要素のコレクションを選択できます。

演算子による結果の包含と除外

MooToolsは、選択を絞り込むために使用されるさまざまな演算子をサポートしています。これらすべての演算子をgetElements（）メソッドで使用できます。これらの各演算子を使用して、名前で入力要素を選択できます。

次の表をご覧ください。 MooToolsがサポートするさまざまな演算子を定義します。

Operator	Description	Example
= (equal to)	Select input element by its name.	DOLLAR('body_wrap').getElements ('input[name = phone_number]');
^= (starts with)	Select input element by comparing its starting letters of the name.	DOLLAR('body_wrap').getElements ('input[name^=phone]');
DOLLAR= (ends with)	Select the input element by comparing its ending letters of the name.	DOLLAR('body_wrap').getElements ('input[name$ = number]');
!= (is not equal to)	De-select the input element by is name.	DOLLAR('body_wrap').getElements ('input[name!=address]');
*= (Contains)	Select the input element which contains particular letter pattern.	DOLLAR('body_wrap').getElements ('input[name*=phone]');

要素の順序に基づくセレクター

MooToolsセレクターは、要素の選択において特定の順序に従います。セレクターは主に2つの順序に従います。 1つは偶数で、もう1つは奇数です。

注-このセレクターは0から始まるため、最初の要素は偶数です。

偶数注文

この順序で、セレクタは偶数の順序で配置されている要素を選択します。次の構文を使用して、HTMLページ内のすべてのdivを選択します。

構文

//selects all even divs
$$('div:even');

奇数

この順序で、セレクタは奇数の順序で配置された要素を選択します。次の構文を使用して、HTMLページ内のすべての奇数divを選択します。

構文

//selects all odd divs
$$('div:odd');

例

次の例は、セレクターの仕組みを示しています。 Webページにテキストボックスとテクノロジのリストがあるとします。テキストボックスにその名前を入力してリストから1つのテクノロジーを選択すると、入力に基づいてフィルターされた結果がリストに表示されます。これは、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は、動的なWebページの作成を支援する軽量のJavaScriptライブラリです。 DOM要素を管理しながら、Webページのすべての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>

ここでは、2つのdivが別のdiv（ body_div ）で囲まれています。スクリプトを設計する際、外部divを1つだけ選択する必要があります。後で、getElements（）メソッドを使用して、2つの内部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は、＆dollar; A（）関数を使用して配列をコピーする方法を提供します。以下は、＆dollar; A（）関数の構文です。

構文

var <variable-name> = $A ( <array-variable>);

配列に要素を追加する

配列に要素を追加するには、2つの異なる方法があります。最初の方法では、要素を1つずつ追加するか、2つの異なる配列を1つにマージできます。

含める（）

include（）メソッドは、DOM要素の配列にアイテムを追加するために使用されます。たとえば、2つのdiv要素と1つの囲まれたdivの下にある1つのspan要素を含む次のHTMLコードを考えてみましょう— 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'）メソッドを呼び出すと、1つと2つの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要素の両方が含まれています。

結合する

このメソッドは、ある配列の要素を別の配列の要素と結合するために使用されます。これにより、コンテンツの重複も処理されます。たとえば、2つのdiv要素と、単一の囲まれたdivの下にある2つのspan要素（ body_div ）を含む次のHTMLコードを考えます。

構文

<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'）メソッドを呼び出します。 1つと2つのdivを取得します。＆dollar;＆dollar;（ '。class_name'）メソッドを呼び出して、2つのスパン要素を選択します。これで、div要素の1つの配列とspan要素の別の配列ができました。これら2つの配列をマージする場合は、combined method（）を使用できます。次のスクリプトを見てください。

スクリプト

//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を含む要素の配列に背景色を適用するとします。次のコードを見てください。ここでは、要素の2番目の配列はどのidまたはクラスグループにも属していないため、背景色を反映していません。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var myArray = $('body_wrap').getElements('.class_name');
            var addSpan = $('addtoarray');
            var addMany = $$('.addMany');

            myArray.include(addSpan);
            myArray.combine(addMany);

            var myArrayFunction = function(item) {
               item.setStyle('background-color', '#F7DC6F');
            }

            myArray.each(myArrayFunction);
         });
      </script>
   </head>

   <body>
      <div id = "body_wrap">
         <div class = "class_name">one</div>
         <div>two</div>
         <div class = "class_name">three</div>
         <span id = "addtoarray">add to array</span>
         <br/><span class = "addMany">one of many</span>
         <br/><span class = "addMany">two of many</span>
      </div>
   </body>

</html>

次の出力が表示されます-

出力

MooTools-関数

MooToolsの関数はJavaScriptの概念です。 JavaScriptで関数を使用する方法はすでに知っています。一般に、スクリプトタグ内のページ本体の外側に関数を保持することをお勧めします。 MooToolsでは、同じパターンに従います。ここでは、要件に応じて独自の機能を設計できます。ここで、 domready 関数内のすべてのユーザー定義関数を呼び出す必要があります。

次の構文を見て、MooToolsで一般化された関数を使用する方法を理解してください。

構文

<script type = "text/javascript">
  /*
   Function definitions go here
   */
   window.addEvent('domready', function() {
     /*Calls to functions go here*/
   });
</script>

基本構造

MooToolsで関数を定義するには、いくつかの基本的な方法があります。 JavaScriptとMooToolsの関数構文に違いはありませんが、違いは関数の呼び出しにあります。 demo_functionという名前の関数を定義する小さな例を見てみましょう。次のコードを見てください。

例

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
        //Define simple_function as a function
         var simple_function = function(){
            document.write('This is a simple function');
         }

         window.addEvent('domready', function() {
           //Call simple_function when the dom(page) is ready
            simple_function();
         });
      </script>
   </head>

   <body>
   </body>

</html>

次の出力が表示されます-

出力

単一パラメーター機能

パラメーターを受け入れる関数を作成することもできます。関数でパラメーターを使用するには、括弧内に変数名を追加する必要があります。指定すると、変数は内部で使用可能になります。単一のパラメーターを受け取り、パラメーターとともにメッセージを出力する関数を定義する例を見てみましょう。

次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var single_parameter_function = function(parameter){
            document.write('The parameter is : ' + parameter);
         }

         window.addEvent('domready', function(){
            single_parameter_function('DEMO PARAMETER');
         });
      </script>
   </head>

   <body>
   </body>

</html>

次の出力が表示されます-

出力

値を返す

ある関数の結果を別の変数の入力として使用する場合は常に、その関数の戻り値を使用する必要があります。関数から値を返すためにreturnキーワードを使用できます。 2つのパラメーター値を受け入れ、これら2つのパラメーターの合計を返す関数を定義する例を見てみましょう。次のコードを見てください。

例

<!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要素に入力されている場合、1つのアクションが適用されます。 DOM要素領域を離れると、別のアクションが適用されます。

マウスEnterイベントがどのように機能するかを説明する例を見てみましょう。次のコードを見てください。

例

<!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

Mouse Leaveイベントの仕組みを説明する例を見てみましょう。次のコードを見てください。

例

<!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要素からすべてのキーを読み取ることができます。

テキストエリア要素がある例を見てみましょう。ここで、テキストエリアにキーダウンイベントを追加して、テキストエリアがキーストアを認識するたびに、すぐにアラートメッセージで応答するようにします。次のコードを見てください。

例

<!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

入力したときにtextareaから値を読み取る同じ例にテキストを追加してみてください。イベントで 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要素のプロパティをキャプチャして変更するのに役立つ基本的な方法です。

取得する（）

このメソッドは、src、value、nameなどの要素プロパティを取得するために使用されます。次の文は、getメソッドの構文です。

構文

//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');

get（）メソッドを使用して要素を取得すると、次のプロパティのリストを受け取ります。

id
name
値
href
src
クラス（要素の場合、すべてのクラスを返します）
テキスト（要素のテキストコンテンツ）

セット（）

このメソッドは、変数に値を設定するために使用されます。これはイベントと組み合わせると便利で、値を変更できます。次のステートメントは、setメソッドの構文です。

構文

//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

erase（）

このメソッドは、elementsプロパティの値を消去するのに役立ちます。要素から消去するプロパティを選択する必要があります。次の文は、erase（）メソッドの構文です。

構文

//this will erase the href value of #id_name
$('id_name').erase('href');

要素の移動

要素の移動とは、既存の要素をページ上のある位置から別の位置に移動することです。 inject（）メソッドを使用して、ページ内で要素を移動できます。 1つのHTMLページに3つの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: 'http://www.finddevguides.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>

次の出力が表示されます-

出力

Webページでこれらのボタンを試してください。divサイズとの違いを確認できます。

MooTools-入力フィルタリング

MooToolsはユーザー入力をフィルタリングでき、入力のタイプを簡単に認識できます。基本的な入力タイプは、数値と文字列です。

数字関数

入力値が数値であるかどうかをチェックするいくつかのメソッドについて説明しましょう。これらのメソッドは、数値入力の操作にも役立ちます。

toInt（）

このメソッドは、入力値を整数に変換します。変数で呼び出すことができ、変数に含まれるすべてのものから通常の整数を与えようとします。

テキストボックスと TO INT という名前のボタンを含むWebページを設計する例を見てみましょう。このボタンは、テキストボックスに入力した値を実際の整数としてチェックして返します。値が整数でない場合、 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（）

このメソッドは、渡した変数の値を調べ、その値の型を返します。

Webページを設計し、入力値がNumber、String、またはBooleanかどうかを確認する例を見てみましょう。次のコードを見てください。

例

<!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（）メソッドは、特定の数値の下限値と上限値を設定するために使用されます。この数は上限値を超えてはなりません。超えている場合、数値は上限値に変更されます。このプロセスは下限でも同じです。

値を入力するためのテキストボックスを提供し、その値の制限を確認するボタンを提供する例を見てみましょう。この例で使用したデフォルトの制限は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（）メソッドは、赤、緑、青の値を16進値に変換します。この関数は数値を処理し、Arrayコレクションに属します。赤、緑、青の個々の値を入力するWebページを設計する例を見てみましょう。 3つすべてを16進値に変換するボタンを提供します。次のコードを見てください。

例

<!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>

次の出力が表示されます-

出力

異なる赤、緑、青の値を試して、16進値を見つけます。

文字列関数

入力文字列値を操作できるStringクラスのいくつかのメソッドについて説明します。先に進む前に、文字列関数を呼び出す方法の次の構文を見てみましょう。

ひも

var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();

Or,

var result_of_function = "Heres some text".someStringFunction();

トリム（）

このメソッドは、指定された文字列のフロントポジションとエンドポジションの空白を削除するために使用されます。文字列内の空白には触れません。次のコードを見てください。

例

<!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 finddevguides.com ";
            document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");

            var trim_string = input_str.trim();
            document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
         });
      </script>
   </head>

   <body>
   </body>

</html>

次の出力が表示されます-

出力

上記のアラートボックスでは、trim（）メソッドを呼び出す前と、trim（）メソッドを呼び出した後のStringの違いを見つけることができます。

クリーン（）

このメソッドは、指定された文字列からすべての空白を削除し、単語間の単一のスペースを維持するために使用されます。次のコードを見てください。

例

<!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 finddevguides.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 finddevguides";
            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 finddevguides</p>
      Enter search string: <input type = "text" id = "input"/>
      <input type = "button" id = "contains" value = "Search String"/>
   </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 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>

次の出力が表示されます-

出力

3つのテキストボックスにテキストを入力し、[置換文字列]ボタンをクリックすると、置換文字列が表示されます。

MooTools-ドラッグアンドドロップ

MooToolsは、Webページ要素にドラッグアンドドロップドラッグ機能を追加するのに役立つ素晴らしい機能を提供します。これを行うには、独自の新しい Drag.Move オブジェクトを作成します。このオブジェクトを使用して、オプションとイベントを定義できます。 DragおよびDrag.Moveクラスは、MooTools Moreライブラリにあります。

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要素を維持するために次のオプションを提供します-

ドロップ可能-ドロップ可能な要素（ドロップ関連のイベントで登録する要素）のセレクターを設定するのに役立ちます。
container -これは、ドラッグ要素のコンテナを設定するのに役立ちます（要素を内部に保持します）。
snap -これは、ドラッグ可能な要素がドラッグを開始する前に、ユーザーがカーソルをドラッグする必要があるピクセル数を設定するのに役立ちます。デフォルトは6で、数値を表す任意の数の変数に設定できます。
handle -これは、ドラッグ可能な要素にハンドルを追加するのに役立ちます。ハンドルは、グラブを受け入れる唯一の要素になります。

ドロップ可能およびコンテナ、スナップ、およびハンドル要素を定義する方法と場所については、次の構文をご覧ください。

構文

//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（）

これにより、ドラッグの開始時にイベントが発生します。長いスナップを設定すると、このイベントはマウスが離れるまで発生しません。次の構文を見てください。

構文

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です。この例では、1つのハンドルを提供しています。これを使用して、ドラッグ可能なオブジェクトをコンテナ内の任意の場所にドラッグできます。すべてのアクションについて、左側に通知があります（青色で示されています）。コンテナ内にドロップ可能な領域があります。ドラッグ可能オブジェクトがドロップ可能領域に入ると、最後の3つのインジケーターがアクティブになります。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <style>
        /*this is generally a good idea*/
         body {
            margin: 0;
            padding: 0;
         }

        /*make sure the draggable element has "position: absolute"
         and then top and left are set for the start position*/
         #drag_me {
            width: 100px;
            height: 100px;
            background-color: #333;
            position: absolute;
            top: 0;
            left: 0;
         }
         #drop_here {
            width: 80%;
            height: 200px;
            background-color: #eee;
            margin-left: 100px;
            margin-top: -200px !important;
         }
        /*make sure the drag container is set with position relative*/
         #drag_cont {
            background-color: #ccc;
            height: auto;
            width: 500px;
            position:relative;
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: auto;
         }
         #drag_me_handle {
            width: 100%;
            height: auto;
            background-color: #F5B041;
         }
         #drag_me_handle span {
            display: block;
            padding: 20px;
         }
         .indicator {
            width: 100px;
            height: auto;
            background-color: #0066FF;
            border-bottom: 1px solid #eee;
         }
         .indicator span {
            padding: 10px;
            display: block;
         }
         .draggable {
            width: 200px;
            height: 200px;
            background-color: blue;
         }
      </style>

      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var dragElement = $('drag_me');
            var dragContainer = $('drag_cont');
            var dragHandle = $('drag_me_handle');
            var dropElement = $$('.draggable');
            var startEl = $('start');
            var completeEl = $('complete');
            var dragIndicatorEl = $('drag_ind');
            var enterDrop = $('enter');
            var leaveDrop = $('leave');
            var dropDrop = $('drop_in_droppable');

            var myDrag = new Drag.Move(dragElement, {
              //Drag.Move options
               droppables: dropElement,
               container: dragContainer,

              //Drag options
               handle: dragHandle,

              //Drag.Move Events
               onDrop: function(el, dr) {
                  if (!dr) { }else {
                     dropDrop.highlight('#FB911C');//flashes orange
                     el.highlight('#fff');//flashes white
                     dr.highlight('#667C4A');//flashes green
                  };
               },
               onLeave: function(el, dr) {
                  leaveDrop.highlight('#FB911C');//flashes orange
               },
               onEnter: function(el, dr) {
                  enterDrop.highlight('#FB911C');//flashes orange
               },

              //Drag Events
               onStart: function(el) {
                  startEl.highlight('#FB911C');//flashes orange
               },
               onDrag: function(el) {
                  dragIndicatorEl.highlight('#FB911C');//flashes orange
               },
               onComplete: function(el) {
                  completeEl.highlight('#FB911C');//flashes orange
               }
            });
         });
      </script>
   </head>

   <body>

      <p align = "center">Drag and Drop Application</p>
      <div id = "drag_cont">
         <div id = "start" class = "indicator"><span>Start</span></div>
         <div id = "drag_ind" class = "indicator"><span>Drag</span></div>
         <div id = "complete" class = "indicator"><span>Complete</span></div>
         <div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
         <div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>

         <div id = "drop_in_droppable" class = "indicator">
            <span>Dropped in Droppable Element</span>
         </div>

         <div id = "drag_me">
            <div id = "drag_me_handle"><span>HANDLE</span></div>
         </div>

         <div id = "drop_here" class = "draggable">
            <p align = "center">Droppable Area</p>
         </div>

      </div>
   </body>

</html>

次の出力が表示されます。ここで、ハンドルをクリックしてドラッグする必要があります。左側に通知の表示があります。

出力

MooTools-正規表現

MooToolsは、正規表現（regex）を作成および使用する方法を提供します。このチュートリアルでは、正規表現の基本と極端な使用法について説明します。

正規表現のいくつかの方法について説明しましょう。

テスト（）

test（）は、入力文字列で正規表現をテストするために使用されるメソッドです。 JavaScriptは既にtest（）関数とともにRegExpオブジェクトを提供していますが、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>

次の出力が表示されます-

出力

ケースを無視

これは、正規表現の概念における重要な状況の1つです。正規表現で大文字と小文字を区別したくない場合は、オプション「 I 」を使用してテストメソッドを呼び出します。正規表現の無視のケースを説明する例を見てみましょう。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var regex_demo = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match').get('value');
            var test_result = test_string.test(regex_value, "i");

            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }

         window.addEvent('domready', function() {
            $('regex').addEvent('click', regex_demo);
         });
      </script>
   </head>

   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
      <input type = "button" id = "regex" value = "TEST"/><br/><br/>
      <Lable id = "regex_1_result"></Lable>
   </body>

</html>

次の出力が表示されます-

出力

正規表現は「^」で始まります

正規表現 '^'（キャップ）は、特定の文字列の先頭にある正規表現を確認できる特別な演算子です。この演算子は、正規表現のプレフィックスとして使用されます。この演算子の使用方法を説明する例を見てみましょう。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var regex_demo = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match').get('value');
            var test_result = test_string.test(regex_value);

            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }

         window.addEvent('domready', function() {
            $('regex').addEvent('click', regex_demo);
         });
      </script>
   </head>

   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
      <input type = "button" id = "regex" value = "Match"/><br/><br/>
      <Lable id = "regex_1_result"></Lable>
   </body>

</html>

次の出力が表示されます-

出力

正規表現は「$」で終わります

正規表現「$」（ドル）は、特定の文字列の末尾にある正規表現を確認できる特別な演算子です。この演算子は、正規表現の接尾辞として使用されます。この演算子の使用方法を説明する例を見てみましょう。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var regex_demo = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match').get('value');
            var test_result = test_string.test(regex_value);

            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }

         window.addEvent('domready', function() {
            $('regex').addEvent('click', regex_demo);
         });
      </script>
   </head>

   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
      <input type = "button" id = "regex" value = "Match"/><br/><br/>
      <Lable id = "regex_1_result"></Lable>
   </body>

</html>

次の出力が表示されます-

出力

キャラクタークラス

文字クラスは、特定の文字（AまたはZ）または文字の範囲（A — Z）を一致させる正規表現のフェーズです。たとえば、単語fooとzooのいずれかが文字列に存在するかどうかをテストする場合、クラスでは正規表現を使用してボックスブラケット[]に文字を配置することでこれを行うことができます。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var regex_demo_1 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_1').get('value');
            var test_result = test_string.test(regex_value);

            if (test_result){
               $('regex_1_result').set('html', "Matched");
            } else {
               $('regex_1_result').set('html', "Not Match");
            }
         }

         var regex_demo_2 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_2').get('value');
            var test_result = test_string.test(regex_value);

            if (test_result){
               $('regex_2_result').set('html', "Matched");
            } else {
               $('regex_2_result').set('html', "Not Match");
            }
         }

         var regex_demo_3 = function(){
            var test_string = $('regex_value').get('value');
            var regex_value = $('regex_match_3').get('value');
            var test_result = test_string.test(regex_value);

            if (test_result){
               $('regex_3_result').set('html', "Matched");
            } else {
               $('regex_3_result').set('html', "Not Match");
            }
         }

         window.addEvent('domready', function() {
            $('regex_1').addEvent('click', regex_demo_1);
            $('regex_2').addEvent('click', regex_demo_2);
            $('regex_3').addEvent('click', regex_demo_3);
         });
      </script>
   </head>

   <body>
      String: <input type = "text" id = "regex_value"/><br/><br/>
      Reg Exp 1: <input type = "text" id = "regex_match_1"/> 
      <input type = "button" id = "regex_1" value = "Match"/>&nbsp
      <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は、定期刊行物をサポートするオプションを提供します。これにより、同じレベルの時間頻度で定期的に関数を呼び出すことができます。定期刊行物の方法と特徴について議論しましょう。

定期的な（）

このメソッドは、同じレベルの時間頻度で関数を定期的に発生させるために使用されます。最初に定義する必要があるものがいくつかあります。 1つは定期的に実行する関数で、2つ目は関数を発生させる頻度の数値（ミリ秒単位の数値）です。関数が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.finddevguides.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>

次の出力が表示されます-

出力

2番目の変数としての要素

周期関数は、domready function（）の外側にある2番目の変数もバインドします。要素を2番目の変数として、定期的に発生させる関数にバインドできます。次の構文を見て、変数を渡す方法を理解してください。

構文

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 に2番目の変数として渡されます。

$ Clear（）

$このメソッドは、定期的な機能を停止するために使用されます。この方法は、定期的な変数値のリセットに役立ちます。次の構文を見て、$ clear（）関数の使用方法を理解してください。

構文

//we clear the var that we passed the function and periodical to
$clear(periodicalFunctionVar);

MooTools-スライダー

スライダーは、ノブまたは任意のボタンをスライドさせている間のアクションを反映する機能です。要素、ハンドラー、オプション、およびコールバックイベントを定義しながら、独自のスライダーを作成できます。スライダーについて詳しく説明します。

新しいスライダーを作成する

まず、スライダーに適したHTML要素を選択する必要があります。基本的な考え方を考慮しながら、div要素を使用すると子要素を作成できるため、div要素はスライダーに最適です。ここで、これらのdivにCSSを設定して、div構造を完璧なスライダーにする必要があります。ここでは、親divは slider 用であり、子divは knob 用です。

次に、スライダーコンストラクターに要素を sliderObject および knobObject として渡すことにより、これらのdivをスライダーとして使用する必要があります。スライダーを定義するための次の構文を見てください。

構文

var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);

スライダーオプションも定義する必要があります。

スライダーオプション

スライダーに使用されるいくつかのオプションについて説明します。

Snap

スナップ値は、trueまたはfalseの値にすることができます。これは、スライダーに沿ってドラッグされたときにノブがステップにスナップするかどうかを決定します。デフォルトでは、falseです。

オフセット

これは、開始位置からのノブの相対オフセットです。これを試してみてください。デフォルトでは、0です。

範囲

これは非常に便利なオプションです。ステップが割り込む番号の範囲を設定できます。たとえば、範囲が[0、200]で、10のステップがある場合、ステップは20離れています。範囲には、[-10、0]などの負の数を含めることもできます。これは、スクロールを反転させるときに非常に便利です。デフォルトでは、falseです。

ホイール

wheelをtrueに設定すると、スクローラーはmousewheelイベントを認識します。マウスホイールを使用する場合、マウスホイールイベントが反転して表示されないように範囲を調整する必要があります（これについては後で詳しく説明します）。

ステップ

デフォルトの100ステップは、パーセンテージで使いやすいため、非常に便利です。ただし、理にかなった範囲で（使用可能な）ステップをいくつでも設定できます。デフォルトでは、100です。

Mode

モードは、スライダーがそれ自体を垂直または水平として登録するかどうかを定義します。ただし、水平および垂直から変換するために必要な手順がいくつかあります。デフォルトでは、水平です。

コールバックイベント

Sliderが提供する3つの重要なコールバックイベントがあります。

onChange

現在のステップでの変更は、イベントの実行をトリガーします。以下に示す例をチェックして、いつ実行されるかを確認してください。

onTick

ハンドルの位置を変更すると、このイベントの実行がトリガーされます。これが実行する内容を確認するには、以下の例を確認してください。

onComplete

このイベントは、ハンドルが放されるたびに実行されます。以下に示す例をチェックして、いつ実行されるかを確認してください。

例

次の例では、イベントインジケーターと共に水平および垂直スライダーを説明します。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <style "text/css">
         #slider {
            width: 200px;
            height: 20px;
            background-color: #0099FF;
         }
         #knob {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #sliderv {
            width: 20px;
            height: 200px;
            background-color: #0099FF;
         }
         #knobv {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #change{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
         #complete{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
      </style>

      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {

            var SliderObject = new Slider('slider', 'knob', {
              //options
               range: [0, 10],
               snap: false,
               steps: 10,
               offset: 0,
               wheel: true,
               mode: 'horizontal',

              //callback events
               onChange: function(step){
                  $('change').highlight('#F3F825');
                  $('steps_number').set('html', step);
               },

               onTick: function(pos){
                  $('tick').highlight('#F3F825');
                  $('knob_pos').set('html', pos);

                 //this line is very necessary (left with horizontal)
                  this.knob.setStyle('left', pos);
               },

               onComplete: function(step){
                  $('complete').highlight('#F3F825')
                  $('steps_complete_number').set('html', step);
                  this.set(step);
               }
            });

            var SliderObjectV = new Slider('sliderv', 'knobv', {
               range: [-10, 0],
               snap: true,
               steps: 10,
               offset: 0,
               wheel: true,
               mode: 'vertical',
               onChange: function(step){
                  $('stepsV_number').set('html', step*-1);
               }
            });

           //sets the vertical one to start at 0
           //without this it would start at the top
            SliderObjectV.set(0);

           //sets the slider to step 7
            $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
         });
      </script>
   </head>

   <body>
      <div id = "slider">
         <div id = "knob"></div>
      </div><br/><br/>

      <div id = "sliderv">
         <div id = "knobv"></div>
      </div><br/>

      <span id = "stepsV_number"></span> <br/>

      <div id = "change" class = "indicator">
         <strong>onChange</strong><br/>
         Passes the step you are on: <span id = "steps_number"></span>
      </div></br/>

      <div id = "complete" class = "indicator">
         <strong>onComplete</strong><br/>
         passes the current step: <span id = "steps_complete_number"></span>
      </div>

   </body>
</html>

出力

水平または垂直スライダーの茶色のノブをクリックしてドラッグすると、各アクションのステップ位置とイベント表示が表示されます。

MooTools-ソート可能

SortablesはWeb開発の高度な機能であり、ユーザーインターフェイスデザインのオプションを実際に開くことができます。また、要素IDのリストを管理し、サーバー側のスクリプト作成に役立つ「serialize」と呼ばれる優れた機能も含まれています。

新しいソート可能なオブジェクトの作成

まず、アイテムのリストを変数に送信します。アイテムのリストの配列が必要な場合は、すべてのコレクションを変数に割り当てます。そして最後に、その変数をソート可能なコンストラクターに渡します。ソート可能なオブジェクトを作成するには、次の構文をご覧ください。

構文

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間をジャンプできるかどうかを決定します。たとえば、ソート可能なオブジェクトに2つのulがある場合、「 constrain：true 」を設定することにより、リストアイテムを親ulに「 constrain 」できます。制約を設定するための次の構文を見てください。

構文

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オプションを受け入れます。復帰内で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
   }
});

Snap

このオプションを使用すると、要素が追従を開始する前にユーザーがマウスをドラッグするピクセル数を確認できます。

構文

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（）

ソート可能なオブジェクトからリストを削除しましょう。これは、特定のリストを所定の位置にロックする場合に役立ちます。リストを削除し、他のリストをソート可能なオブジェクトのままにして、削除されたリストのコンテンツをロックすることができます。

シリアライズ（）

並べ替えはすべて素晴らしいですが、データを使用して何かしたい場合はどうでしょうか？。シリアライズ（）;は、アイテム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」とは異なり、ディスプレイは要素を開いて遷移します。

構文

var AccordionObject = new Accordion(toggles, content {
   display: 0//default is 0
});

show

「表示」と同様に、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
});

幅

これは、 height オプションと同じように機能します。ただし、これはコンテンツを表示するために高さを移行する代わりに、幅の移行に役立ちます。上記で使用したように、標準設定で「幅」を使用する場合、コンテンツの高さに基づいて、タイトルトグル間のスペースは同じままになります。「コンテンツ」divは左から右に遷移し、そのスペースに表示されます。

構文

var AccordionObject = new Accordion(toggles, content {
   width: false//default is false
});

不透明度

このオプションは、コンテンツを非表示または表示するときに不透明度の切り替え効果を表示するかどうかを決定します。上記のデフォルトオプションを使用しているため、その効果を確認できます。

構文

var AccordionObject = new Accordion(toggles, content {
   opacity: true//default is true
});

fixedHeight

固定の高さを設定するには、整数を修正する必要があります（たとえば、コンテンツの高さ100ピクセルに100を入れることができます）。コンテンツの自然な高さよりも低い固定高さを計画している場合、これは何らかのCSSオーバーフロープロパティと共に使用する必要があります。

構文

var AccordionObject = new Accordion(toggles, content {
   fixedHeight: false//default is false
});

fixedWidth

上記の「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 ^ th ^を追加すると、.addSection（）で追加する場所に関係なく、インデックスは5になります。

表示（）

これにより、特定の要素を開くことができます。インデックスで要素を選択できます（したがって、要素のペアを追加して表示したい場合は、上記で使用したものとは異なるインデックスがここにあります。

構文

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 = "http://www.finddevguides.com">Tool tip _demo</a>

ツールチップの作成に使用されるコードを見てください。

var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);

例

次の例は、ツールチップの基本的な考え方を説明しています。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var customTips = $$('.tooltip_demo');
            var toolTips = new Tips(customTips);
         });
      </script>
   </head>

   <body>
      <a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
         rel = "here is the default 'text' for toll tip demo"
         href = "http://www.finddevguides.com">Tool tip _demo</a>
   </body>

</html>

次の出力が表示されます-

出力

ツールチップオプション

ヒントには5つのオプションしかなく、それらはすべて一目瞭然です。

showDelay

ミリ秒単位で測定される整数。これは、ユーザーが要素にマウスを合わせてからツールチップが表示されるまでの遅延を決定します。デフォルトは100に設定されています。

hideDelay

上記のshowDelayと同様に、この整数（ミリ秒単位でも測定）は、ユーザーが要素を離れたときにチップを隠すまでの待機時間を決定します。デフォルトは100に設定されています。

クラス名

これにより、ツールチップラップのクラス名を設定できます。デフォルトはNullに設定されています。

オフセット

これにより、ツールチップが表示される要素からの距離が決まります。「x」は右オフセットを指します。「y」は下方向オフセットです（「固定」オプションがfalseに設定されている場合はカーソルを基準に、それ以外の場合はオフセットは元の要素を基準にします）。デフォルトはx：16、y：16

一定

これは、要素の周りを移動した場合にツールチップがマウスに従うかどうかを設定します。 trueに設定すると、カーソルを移動してもツールチップは移動しませんが、元の要素に対して固定されたままになります。デフォルトはfalseに設定されています。

ツールチップイベント

このクラスの残りの部分のように、ツールチップイベントは単純なままです。 onShowとonHideの2つのイベントがあり、期待どおりに機能します。

onShow（）

このイベントは、ツールチップが表示されたときに実行されます。遅延を設定すると、遅延が発生するまでこのイベントは実行されません。

onHide（）

ツールチップは、このイベントの実行で非表示になります。遅延がある場合、遅延が発生するまでこのイベントは実行されません。

ツールチップメソッド

ツールチップには、アタッチとデタッチの2つの方法があります。これにより、特定の要素をターゲットにしてツールチップオブジェクトに追加し（それにより、そのクラスインスタンスのすべての設定に固有）、特定の要素を切り離すことができます。

attach（）

新しい要素をツールチップオブジェクトにアタッチするには、単にティップオブジェクトを記述し、.attach（）;にタックを付け、最後に要素セレクターをブラケット（）内に配置します。

構文

toolTips.attach('#tooltipID3');

dettach（）

このメソッドは.attachメソッドと同じように機能しますが、結果はまったく逆です。まず、tipオブジェクトを記述し、次に.dettach（）を追加し、最後に（）内に要素セレクターを配置します。

構文

toolTips.dettach('#tooltipID3');

例

ツールチップを説明する例を見てみましょう。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <style>
         .custom_tip .tip {
            background-color: #333;
            padding: 5px;
         }
         .custom_tip .tip-title {
            color: #fff;
            background-color: #666;
            font-size: 20px;
            padding: 5px;
         }
         .custom_tip .tip-text {
            color: #fff;
            padding: 5px;
         }
      </style>

      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var customTips = $$('.tooltip_demo');

            var toolTips = new Tips(customTips, {
               showDelay: 1000,   //default is 100
               hideDelay: 100,    //default is 100
               className: 'custom_tip',//default is null

               offsets: {
                  'x': 100,      //default is 16
                  'y': 16        //default is 16
               },

               fixed: false,     //default is false
               onShow: function(toolTipElement){
                  toolTipElement.fade(.8);
                  $('show').highlight('#FFF504');
               },

               onHide: function(toolTipElement){
                  toolTipElement.fade(0);
                  $('hide').highlight('#FFF504');
               }
            });

            var toolTipsTwo = new Tips('.tooltip2', {
               className: 'something_else',//default is null
            });
            $('tooltipID1').store('tip:text',
               'You can replace the href with whatever text you want.');
            $('tooltipID1').store('tip:title', 'Here is a new title.');
            $('tooltipID1').set('rel', 'This will not change the tooltips text');
            $('tooltipID1').set('title', 'This will not change the tooltips title');

            toolTips.detach('#tooltipID2');
            toolTips.detach('#tooltipID4');
            toolTips.attach('#tooltipID4');
         });
      </script>
   </head>

   <body>
      <div id = "show" class = "ind">onShow</div>
      <div id = "hide" class = "ind">onHide</div>

      <p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
         rel = "here is the default 'text' of 1"
         href = "http://www.finddevguides.com">Tool tip 1</a></p>

      <p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
         rel = "here is the default 'text' of 2"
         href = "http://www.finddevguides.com">Tool tip is detached</a></p>

      <p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
         rel = "here is the default 'text' of 3"
         href = "http://www.finddevguides.com">Tool tip 3</a></p>

      <p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
         rel = "here is the default 'text' of 4, i was detached then attached"
         href = "http://www.finddevguides.com">Tool tip detached then attached
         again. </a></p>

      <p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
         rel = "here is the default 'text' of 'other style'"
         href = "http://www.finddevguides.com/">A differently styled tool tip</a></p>

   </body>
</html>

次の出力が表示されます-

出力

MooTools-タブ付きコンテンツ

タブ付きコンテンツとは、タブ付き領域に存在し、そのコンテンツがリストアイテムに関連するコンテンツを意味します。 hover や click などのアクションをリスト項目に適用するたびに、即時の反応によりタブ付きコンテンツに効果が生じます。

タブについて詳しく説明しましょう。

シンプルなタブの作成

シンプルなメニュータブを作成すると、リストアイテムにカーソルを合わせたときに追加情報を調べることができます。まず、アイテムを含む順序付けられていないリストを作成し、次に、それぞれが1つのリストアイテムに対応する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>

出力

リストアイテムの上にマウスポインターを置くと、それぞれのアイテムの追加情報が表示されます。

マーフコンテンツタブ

コードを拡張することで、非表示のコンテンツが表示されたときにモーフィング機能を追加できます。これを実現するには、スタイリングの代わりに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は、クラスオブジェクトのオプションです。これは、クラスセットアップの作成に役立ちます。これは、ユーザー構成オプションと変数のセットアップにも役立ちます。初期化オプションの次の構文を見てください。

構文

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（\ {}）

キーワード構造の開始と設定は、スタイルの開始と設定に使用されます。ただし、この構造では、インデックスを介して要素を参照します。最初の要素は0、2番目の要素は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オプションは2つだけです-モードとラッパー。

Mode

モードには、「垂直」または「水平」の2つの選択肢があります。垂直方向は上から下、水平方向は左から右に表示されます。下から上へ、または右から左へ進むオプションはありません。これを達成するためにクラス自体をハッキングするのは比較的簡単だと理解しています。私の意見では、これは私が標準を見たいオプションです。このオプションを許可するためにクラスをハッキングした人がいれば、私たちにメモを残してください。

ラッパー

デフォルトでは、Fx.Slideはスライド要素にラッパーをスローし、「オーバーフロー」：「非表示」を与えます。ラッパーを使用すると、別の要素をラッパーとして設定できます。上で言ったように、これがどこで役に立つかわからず、考えを聞くことに興味があるでしょう（mooforum.netのhorseweaponにこれを解決してくれてありがとう）。

Fx.Slideメソッド

Fx.Slideは、要素を表示および非表示にするための多くのメソッドも備えています。

slideIn（）

名前が示すように、このメソッドは開始イベントを起動し、要素を公開します。

slideOut（）

要素を非表示の状態に戻します。

トグル（）

これは、現在の状態に応じて、要素を内側または外側にスライドさせます。クリックイベントに追加する非常に便利な方法。

隠す（）

これにより、スライド効果なしで要素が非表示になります。

show（）

これにより、スライド効果のない要素が表示されます。

Fx.Slideのショートカット

Fx.Slideクラスは、要素に効果を追加するための便利なショートカットも提供します。

セット（「スライド」）

新しいクラスを開始する代わりに、要素にスライドを設定すると、新しいインスタンスを作成できます。

構文

slideElement.set('slide');

設定オプション

あなたもショートカットでオプションを設定することができます-

構文

slideElement.set('slide', {duration: 1250});

滑り台（）

スライドが.set（）になったら、.slide（）メソッドで開始できます。

構文

slideElement.slide('in');

*.slide* は受け入れます-

‘in’
'でる'
'トグル'
「ショー」
'隠す'

…それぞれ上記の方法に対応しています。

例

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（）

このメソッドは、2つのスタイルプロパティ値間のスムーズな移行を提供します。 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>

次の出力が表示されます-

出力

フェード（）

このメソッドは、要素の不透明度または透明度を調整します。 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の2つの主要な機能が含まれています。

最初の機能では、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が提供する関数です。スタイルプロパティ間の遷移の新しいトゥイーンを作成するために使用されます。モーフィング中に、オブジェクトを含む要素を選択する必要があります。その後、さまざまな機能を適用できます。また、新しく作成されたトゥイーンに要素をバインドする必要があります。

Webページに3つのボタンを提供する例を見てみましょう。最初のボタンは、高さ、幅、色などのスタイルプロパティを持つ要素を作成する SET ボタンです。 2つ目は、要素のスタイルプロパティを変更する MORPH ボタンです。 3つ目は 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.TweenとFx.Morphに役立つさまざまなFx.Optionsを提供します。これらのオプションを使用すると、効果を制御できます。

MooToolsが提供するいくつかのオプションについて説明しましょう。先に進む前に、オプションを設定するための次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
  //first state the name of the option
  //place a :
  //then define your option
});

fps（フレーム/秒）

このオプションは、モーフィング中のアニメーションの1秒あたりのフレーム数を決定します。これらのfpsをMorphまたはTween機能に適用できます。デフォルトでは、fpsの値は50です。これは、モーフィング中にすべての機能が1秒あたり50フレームかかることを意味します。

例

5 fpsを使用してdiv要素をモーフィングする例を見てみましょう。次のコードを見てください。

<!DOCTYPE html>
<html&gt

   <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の3種類の単位があります。次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

上記の構文は、パーセンテージをユニットに割り当てることです。これは、数字のすべての値がパーセンテージとして扱われることを意味します。

link

このオプションは、アニメーションを開始するための複数の呼び出しを管理する方法を提供します。一度に複数のイベントコールを適用すると、これらのコールはリンクコールとして取り込まれます。最初の呼び出しが終了すると、2番目の呼び出しが自動的に実行されます。それは次の3つのオプションが含まれています-

ignore -これはデフォルトのオプションです。効果が完了するまで、呼び出しの数は無視されます。
キャンセル-これは、別の作られている場合、現在の効果をキャンセルします。最新のコール優先順位に従います。
Chain -これにより、エフェクトを連結し、呼び出しのスタックを維持できます。スタック内のすべてのチェーンされた呼び出しを通過するまで、すべての呼び出しを実行します。

リンクオプションを使用するための次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

期間

このオプションは、アニメーションの継続時間を定義するために使用されます。たとえば、1秒間にオブジェクトを100ピクセル移動させる場合、1秒間に1000ピクセル移動するオブジェクトよりも遅くなります。ミリ秒単位で測定される数値を入力できます。または、数字の代わりにこれら3つのオプションのいずれかを使用できます。

ショート= 250ms
通常= 500ms（デフォルト）
長い= 1000ms

期間を使用するための次の構文を見てください。

構文

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

Or,

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

遷移

このオプションは、遷移タイプを決定するために使用されます。たとえば、スムーズに移行する必要がある場合や、ゆっくりと開始する必要がある場合は、最後に向かって速度を上げます。遷移を適用するには、次の構文をご覧ください。

構文

var tweenObject = new Fx.Tween(tweenElement, {
   transition: 'quad:in'
});

次の表に、さまざまな種類の遷移を示します。

S.No.	Transition type & Description
1	Linear イン、アウト、インアウトイベントを伴う線形遷移を表示します
2	Quad in、out、in-outイベントを含む2次遷移を表示します
3	Cubic in、out、in-outイベントのあるキュービクルトランジションを表示します
4	Quart in、out、in-outイベントを含む4次遷移を表示します
5	Quint in、out、in-outイベントを含む5次遷移を表示します
6	Pow in、out、in-outイベントでQuad、Cubic、Quart、Quintを生成するために使用
7	Expo in、out、in-outイベントによる指数関数的な遷移を表示します
8	Circ in、out、in-outイベントを伴う循環遷移を表示します
9	Sine 入力、出力、入力イベントを含む正弦波遷移を表示します
10	Back トランジションを元に戻し、その後、イン、アウト、インアウトイベントですべてを開始します。
11	Bounce in、out、in-outイベントで遷移を弾力的にします
12	Elastic イン、アウト、イン-アウトイベントを伴う弾性曲線遷移

MooTools-Fx.Events

Fx.Eventsには、アニメーション効果全体を通して異なるレベルでいくつかのコードを上げるためのオプションがいくつかあります。トゥイーンとモーフを制御できます。 Fx.Eventsが提供するオプション-

onStart -Fxの起動時に実行するコードを生成します。
onCancel -Fxがキャンセルされたときに実行するコードを生成します。
onComplete -Fxが完了したときに実行するコードを生成します。
onChainComplete -チェーンされたFxが完了したときに実行するコードを生成します。

例

Webページにdivがある例を見てみましょう。イベントメソッドをdivに適用することから始めます。最初のメソッドは、マウスポインターがdiv領域に入ったときにdivを強調表示するonStart（）メソッドです。

2つ目は、マウスポインターがdiv領域を離れたときにdivを強調表示するonComplete（）メソッドです。そして、マウスポインターが自動的に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>

次の出力が表示されます-

出力

Mootools-quick-guide

MooTools-はじめに

MooToolsのコンポーネント

MooTools –利点

MooTools-インストール

ステップ1：MooTools CoreおよびMooTools Moreライブラリをダウンロードする

ステップ2：MooTools Coreおよびその他のライブラリをサーバーにアップロードします

ステップ3：MooTools Coreおよびその他のライブラリをスクリプトタグにリンクする

MooTools-プログラム構造

例

出力

MooTools-セレクター

基本セレクター（＆dollar;）

構文

getElement（）

マルチセレクター（＆dollar;＆dollar;）

構文

構文

構文

getElements（）

演算子による結果の包含と除外

要素の順序に基づくセレクター

偶数注文

奇数

MooTools-配列の使用

each（）メソッド

スクリプト

スクリプト

スクリプト

スクリプト

配列から特定の要素を選択する

getLast（）

getRandom（）

配列のコピー

構文

配列に要素を追加する

含める（）

結合する

MooTools-関数

構文

基本構造

例

出力

単一パラメーター機能

例

出力

値を返す

例

出力

MooTools-イベント処理

シングルクリック

例

出力

マウス入力およびマウス終了

例

出力

例

出力

イベントを削除する

構文

入力としてのキーストローク

例

出力

例

出力

MooTools-DOM操作

基本的な方法

取得する（）

構文

セット（）

erase（）

要素の移動

例

出力

例

出力

新しい要素を作成

構文

例

出力