WebTecNote

MooTools Core 1.3 リリース！新機能・変更点まとめ

まだ私も良く分かってないので調べながらメモっていくつもりで。

1.3がでたので1.2で書いたプラグインもバージョンうｐしなきゃ！と思っても慌てる必要はnothing！
下位互換機能がついたCore（width Compatibilityなやつ）を選べば共存出来る。

Slick

セレクタエンジンSlickはMooToolsのファミリープロジェクト。だってお。
1.3でCoreに内臓されてCSSのセレクタを使用したDOM操作がパワーアップ。

Create Element

1.2.xで要素を作るときのソース：

new Element("div", {"id": "mootools", "class": "moo cow","title":"Sample", "text":"MooTools!"});

Slickで書くとこうなる:

new Element("div#mootools.moo.cow[title=Sample][text=MooTools?]");

Result:

<div id="mootools" title="Sample" class="moo cow">MooTools?</div>

ZenCodingみたいな感じだけど作れる要素は１つだけです。
１行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。

Selector

CSS3のセレクタ全てに対応してgetメソッドの幅がひろがりんぐ。

myElementの直接の子要素のみを取得する例：

myElement.getElements('> div.cow');

HTMLソースが次のようになっている場合、最初と２番目の.cowにはヒットするが.mooの子になっている.cowにはヒットしない。

<div id="myelement">
    <div class="cow">cow</div>
    <div class="cow">
        <div class="moo">cou > moo</div>
   </div>
    <div class="moo">
         <div class="cow">moo > cow</div>
   </div>
</div>

CSS：

#myElement > div.cow

1.2.x：

myElement.getChildren('.cow');​​​​​​​​​​​​​​​

1.2.xで1.3と同じ書き方をしてもエラーにはならないが戻り値が異なる。（.mooの子になっている.cowにヒット）

myElementの子要素からDIVとmooというクラスを持つ要素を取得する例：

myElement.getElements('div, p.moo');

カンマで複数選択。

1.2.5までだと２度getElementsを書く必要があった。

myElement.getElements('div');
myElement.getElements('p.moo');

getElementsの戻り値はArrayなので１回で済むのは便利。

General Sibling

CSS3のプロパティは色々あるが公式ブログのサンプルソースに出ていた前後の要素を示すチルダを例に挙げる。
!~　は before、~ はafter

<div id="example2">
    <div class="cow">
        <div><label><input type="checkbox">Do you like MooTools?</label></div>
    </div>
    <div class="row">
        <div>Email:<input type="text"></div>
    </div>
    <div class="cow">
        <div>Your Name:<input type="text"></div>
    </div>
</div>

Sample1:

$$('#example2 div.row !~ div input');
//return  [<input type="checkbox">]

Sample2:

$$('#example2 div.row ~ div input');
//return [<input type="text">]

Deprecated

非推奨になったもの一覧

Function

Object

Objectメソッドの登場でHashが非推奨に。

Browser

Engineは新たにNameとしてブラウザ名で指定出来るようになった。
プラットフォーム判別でスマートフォンにも対応。

Element

モバイルバージョンを終了