harayu.com

Architect, Music, Movie, Web Design, Book etc…

rss-feed

07 5月 2010

MooToolsことはじめ(初心者向け) Part1

おそらく”こと納め”というものはないと思いますが。一応Part3まで作る予定です。
この記事はMooTools for Beginners Part 1~7(Ryan Florence Blog)というチュートリアルをMooToolsのドキュメント(日本語訳)を参考にしながら、自分なりにまとめてみた独学メモみたいなものです。

基本

・ページにセットアップ

head部分に

又はGoogle CodeのAJAX Libraries API から

と記述。これでセッティングは完了

・domreadyとloadに着手

window.addEvent('domready',function () {
    //イメージ以外のドキュメントがロードされたときの処理
})
window.addEvent('load',function() {
    全てのドキュメントがロードされたときの処理)
}

domreadyは要素を選択して操作する時に使用し、loadは寸法などを測る時に使用する。
通常はdomreadyだけで間に合うでしょう。
domreadyはjQueryではreadyですね。

下の実行ボタン(▶)を押すとdomreadyが完了してalertを実行します(これはMooShelというツールを使用しています)


・要素とそのメソッドを操作する

エレメントにクラス属性を追加又は削除するとき

$関数は要素のIDを取得します。
複数のエレメントがほしい時は$$関数を使用し、この関数は要素の集まり(又は配列)を返します。
これらの関数で取得したエレメントにaddClass、removeClassでクラスの追加と削除、さらにはtweenやmorphなどのアニメーションなども行えるようになります。

子セレクタと隣接セレクタを使って要素の配列を取得する例

$$('div#content > .css3 + span.selectors')

ちなみにjQueryを使ってる人は

$('div#someElement'); // これは使えません

$('someElement'); // これはOK

$$('div#someElement'); // OKですが、1つの項目がある配列を手に入れるだけです。

$$('div#someElement')[0]; // 愚かな書き方です。なぜなら$('someElement');と書くのと同じだからです


・イベントリスナー、メソッドチェーン

ここではmouseenter、mouseleaveイベントを使用してアニメーションするメニューを作成します

eachは配列の各要素に対して関数を呼び出す配列メソッドで、この関数には要素自身と、配列内でのインデックスが渡されます。JavaScript ではfor~in構文がありますがこれは値ではなくキーを取り出すのでちょっと面倒くさいため、eachはとても便利、MooToolsじゃなくてもだいたいのライブラリには同じかもしくは似たようなメソッドがあるでしょう。

addEvent

構文:myElement.addEvent(type,fn)
2つの引数をとり、typeにはイベント名(click,load,mouseenterなど)が入り、onはつけません。
fnには関数が入ります。

また、addEventsを使うことで、オブジェクトを用いて1度に複数のイベントを添付したりできます。

$$('li').each(function(li) {
   li.addEvents({
      'mouseenter' : function() {
        element.tween('padding-left',20);
      },
      'mouseleave' : function() {
        element.tween('padding-left',0);
      }
   });
})


メソッドチェーン

上の例のようにaddEventのあとにaddEventなどをつなげたり、メソッドを連続してつなげたりするjQueryなどではおなじみの書き方。ただ個人的にはやりすぎると見にくくてあまり好きじゃありませんが。

・他の要素の操作、イベントの削除

下の例では1つのボタンを押すことで他の要素を変更する例です。

最初の数行でエレメントを変数に格納し、そのエレメントにclickイベントを添付することで、いたるところで$(‘hello’)とか参照する必要はなくなります。
また、addEventを使用するとき、2つのこと、イベントタイプ(クリック)、および機能(showHello)をそれに与えます。 そしてイベントを取り除くためには、addEventと同じようにremoveEventを呼ぶだけです。
この例では有効ボタンのclickイベントにdetachという関数をつけて、その中でremoveEventを呼び出しています。

オブジェクトを操作

・オブジェクトとしてクラスを例示する

ここまではElement.tween()のように使用していましたが、これらのようなショートカットを持つたくさんのクラスがMooToolsにはあります。これらのショートカットの代わりにインスタンスを作成することで、ずっと多くのコントロールが出来るようになります。
Fx.Tweenはある要素のCSSプロパティをある値から別の値へ遷移させるトゥイーンアニメーションです。
クラスのインスタンスを作成し、変数に納めるのは簡単です。

var myTween = new Fx.Tween('myelement');

この時に、myTweenは2つのメソッド、setとstartを持ちます。
下の例ではCSSのプロパティを今の値から200へと変更します。引数が3つの場合、2つめの値から3つめの値へと変更することになります。

myTween.start('height',200);

クラスのインスタンス化したオブジェクトのプロパティ、メソッドをコールすることはMooToolsの最も基本的な本質の1つです。

・クラスのオプション

Fx.Tweenは2つの引数(コンストラクタ生成の時)をとります。
new Fx.Tween(element,options)
optionsオブジェクトはその振る舞いをFx.Tweenに教える役割を担っています。JavaScriptのオブジェクトはキー:値ののペアで記述するのでCSSと同じです(コンマはIEでは違ったりしますが)。

//JavaScriptのオブジェクトの書き方
var someObject = {
    'height' : 100,
    'width' : 200
}

/* cssの書き方 */
div#someCon {
    'height' : 100;
    'width' : 200;
}

下の例1ではコンストラクタの外からオプションズオブジェクトを渡すやり方ですが、例2の方が一般的です。

//例1
var options = {
    property : 'height',
    duration : 750,
    transition : 'bounce:out'
};

var myTween = new Fx.Tween('myText',options);

//例2
var myTween = new Fx.Tween('myText',{
    property : 'height',
    duration : 750,
    transition : 'bounce:out'
});

下の例は特定のクラスで利用可能な全てのオプションについて説明するいい例です。クラスのインスタンスを作成した後にそれらのオプションを変更することが出来ることを示しています。

この例ではaddEventではなくてaddEventsを使用することで、オブジェクトを用いて複数のイベントオブジェクトを添付しています。

・Events

エフェクトが実行、又は終了する時になにかをしたい時があるかもしれません。MooToolsにはそういった時の場合にカスタムイベントというものがあります。
Fx.Tweenはstartやcompleteを含めFxイベントの全てを継承しているのです。
下の例ではテキストエリアにフォーカスが当たるとアニメーションが始まり、そのアニメーションが終了するとテキストの色を変更するcssのクラス名を付加します。

toggleClassというのは指定した要素名を持っていれば削除し、持っていなければ付加するエレメントメソッドです。

さて、今回のこのPart1ではMooToolsの基本概念を示すことを意図しています。実際Fx.Tweenで出来ることはもっとたくさんありますが、それはまたいつかの機会に。

コメントを投稿

関連記事

Search

Category

Archive

Info