MooTools 1.2 概要_Mootools

MooTools 1.2 JavaScript ライブラリの紹介
MooTools 1.2 は、Web での対話型 JavaScript 開発を容易にするために特別に設計された、強力で軽量な JavaScript ライブラリです。ある意味、MooTools は CSS の拡張機能と考えることができます。たとえば、CSS を使用すると、マウスを上に置くと変更できます。 JavaScript を使用すると、より多くのイベント (クリック イベント、マウスオーバー イベント、キーボード イベントなど) に触れることができ、MooTools を使用するとそれが非常に簡単になります。
さらに、MooTools には、要素のプロパティを変更するだけでなく、「モーフ」 (変形) または「トゥイーン」 (トゥイーン アニメーション) プロパティを設定できるさまざまな非常に優れた拡張機能もあります。を使用すると、ナビゲーション メニューに表示されるようなアニメーション効果を作成できます (Fdream 注: オリジナルの作成者によるもので、私のホームページにもあります)。
これは単なる例であり、MooTools ではさらに多くのことができます。今後 30 日間にわたって、MooTools ライブラリを詳しく調べ、配列や関数から Fx.Slide、およびその他のバンドルされたプラグインに至るまですべてを探索していきます。
MooTools 1.2 のリファレンス
まず、MooTools 1.2 コア ライブラリをダウンロードして参照します。
MooTools 1.2 コア ライブラリをダウンロードします
MooTools 1.2 コア ライブラリをサーバーまたはワークスペースにアップロードします
HTML ドキュメントの head タグ内で MooTools 1.2 コア ライブラリをリンクします
リファレンスコード:

コードをコピー コードは次のとおりです:

(Fdream 注: MooTools 1.2 をダウンロードすると、デフォルトのサフィックスは ".txt" になります。 、サフィックスを「.js」に変更してください。)
Head タグ内に Script タグを追加します
MooTools をページに適用したので、コードを記述する場所がまだ必要です。ここには 2 つのオプションがあります:
1. head タグ内に次のコードを記述し、script タグ内にコードを記述します:
参照コード:

コピーcode コードは次のとおりです:

2. JavaScript ファイルを外部に作成し、このファイルをページの先頭にリンクします:
参照コード:

コードをコピー コードは次のとおりです:

ここでは、任意のメソッドを使用できます。私は通常、domready イベントで呼び出されるメソッドを script タグの間に置き、関数を外部ファイルに置きます。
domready にコードを配置します。
MooTools メソッドは domready イベントで呼び出す必要があります。
参照コード:

コードをコピー コードは次のとおりです:

window.addEvent ('domready ', function() {
exampleFunction();
});

(Fdream 注: これは正確には当てはまりませんが、JavaScript コードがちなみに、domready イベント: ページの HTML コード (画像、フラッシュなどは含まず、コードのみ) がダウンロードされると、domready イベントがトリガーされます。ページは完全にダウンロードできます (画像、フラッシュなどを含む) ) 大きな画像のダウンロードには時間がかかるため、スクリプトが実行できないことによって引き起こされる例外を避けるために、スクリプトを実行する前に)
コードを入力してください関数
関数の外部で作成して、domready 内で呼び出すこともできます。
リファレンス コード:

コードをコピー コードは次のとおりです。

var exampleFunction = function() {
alert('hello')
}; ', function() {
exampleFunction() >});

ライブラリの詳細な紹介
この最初の講義では、このライブラリのアーキテクチャの主要なコンポーネントのいくつかを詳しく見てから、他の基本的な機能をざっと見ていきます。
コア
コア部分には、いくつかの一般的なタスクを実行するための MooTools ライブラリのいくつかの公開関数が含まれており、また多くのオリジナル関数も強化されています (詳細は後で紹介します)。以下のコンテンツは、MooTools 機能のいくつかの例としてのみ使用されており、MooTools ドキュメントの読書に代わるものではありません。
値をチェックします (値がない場合、または 0 の場合は false を返します) - $chk(value);
2 つの値の間のランダムな整数を返します - $random(min, max);ブラウザ、ブラウザ エンジン、ブラウザ機能の検出が容易になりました
(Fdream 注: 最初の説明は間違っています。$chk(value) は値が定義または割り当てられているかどうかを確認するだけです。値が 0 の場合は true を返し、のみを返します未定義または null の場合は false)
ネイティブ (ローカル オブジェクト)
ライブラリのこの部分には、配列 (配列、値、またはオブジェクト)、関数、を簡単に操作できるいくつかの公開ツールも含まれています。数値、文字列、ハッシュ オブジェクト、イベント。ネイティブ オブジェクトのユーティリティ機能をいくつか示します。
配列内の各要素に対してスクリプトを実行します - .each();
配列内の最後の要素を取得します - .getLast();
Each イベントをトリガーしますfor )
JavaScript クラス (CSS クラスとは対照的に) は、その機能を再利用できるオブジェクトです。 MooTools クラスの詳細については、Valerio による簡単な紹介記事 (MooTools クラス – 使い方) をご覧ください。 David Walsh の MooTools テンプレートもお勧めします。
Element (Element)
MooTools ライブラリの Element クラスは、非常に便利な関数をいくつか提供します。このクラスを通じて、DOM 要素を選択し、そのプロパティと位置を操作し、CSS スタイルを変更できます。 MooTools が提供する DOM 要素を処理するための非常に強力なツールをいくつか紹介します。
ID または CSS クラス名で指定したタイプの最初の DOM 要素を選択します - .getElements();
同じ ID または CSS クラスを持つすべてを選択します。名前付きの DOM 要素 - .getElements();
要素に CSS クラスを追加します - .addClass();
要素の属性値を取得します - .getProperty(); element - .setProperty();
要素のスタイル属性値を取得する - .getStyle();
要素のスタイル属性値を変更する - .setStyle(); element - .getCoowned ();
(Fdream 注: 1 つのページに複数の同一 ID を含めることはお勧めしません。表示しないことが最善です。一部のブラウザでは予期せぬエラーが発生しやすい可能性があります。)
Utilities
ユーティリティは、domready イベント、AJAX 呼び出しを管理できるツール、Cookie を簡単に管理できるツール、さらには ActionScript に JavaScript インターフェイスを提供できる「swiff」関数など、より洗練された選択ロジックを提供します。
FX (エフェクト)
これはおそらく MooTools の最も興味深い部分です。 Fx (エフェクト) を使用すると、「トゥイーン」(トゥイーン アニメーション) および「モーフ」(モーフ アニメーション) エフェクトを作成して、DOM オブジェクトをアニメーション化できます。
2 つのスタイル属性値の間でアニメーション変換を作成します (div を緩やかに成長させるなど) - var myFx = new Fx.Tween(element);
複数の異なる属性値の間でアニメーション変換を作成します (たとえば、 、 div が徐々に大きくなる過程で、その境界線はどんどん小さくなり、同時に背景色も変化します) - var myFx = new Fx.Morph(element);
Request (request ) JavaScript XMLHttpRequest (AJAX) 機能を簡単に処理するためのツールが含まれています。リクエスト/レスポンス全体の煩わしさを軽減するために、Request オブジェクトには、HTML および JSON オブジェクト (JavaScript Object Notation) を処理するように設計されたいくつかの拡張機能もあります。
プラグイン
MooTools プラグインは、コア機能を拡張し、高度な UI 機能を Web プロジェクトに簡単に追加できます。プラグインのリストは次のとおりです。
Fx.Slide
Fx.Scroll
Fx.Elements
Drag
Drag.Move
Color
Group
Hash.Cookie
ソータブル
ヒント
スムーズスクロール
スライダー
スクローラー
アセット
アコーディオン
グローバル概要
次の講義を始める前に、少し時間を取って包括的な内容を確認してくださいMooTools のドキュメントを参照してください。理解できない部分もあるかもしれませんが、気にせずに読んで理解できる範囲で理解してください。今後 29 日間にわたって、ライブラリの特定の部分を徐々に掘り下げ、MooTools を読みやすい一口サイズの部分に分解していきますが、最初に必ずカタログ全体をよく見てください。
詳細

開始するために必要なものがすべて含まれた zip パッケージ

MooTools 1.2 コア ライブラリ、シンプルな HTML ファイル、およびスクリプトの関数を記述するためのスクリプトが含まれています外部 JavaScript ファイル、CSS スタイル シート ファイル。この HTML ファイルには詳細なコメントが記述されており、domready イベントが含まれています。

MooTools 1.2 Memo
Here is a good summary list of MooTools 1.2 functions. I just printed a copy for myself and am looking for a place to hang it up. Maybe I should stop by the printer and ask them to provide me with a poster-sized one :). Anyway, here is the link to the MooTools 1.2 cheat sheet.