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

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

1.3がでたので1.2で書いたプラグインもバージョンうpしなきゃ!と思っても慌てる必要は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みたいな感じだけど作れる要素は1つだけです。
1行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。

Selector

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

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

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

HTMLソースが次のようになっている場合、最初と2番目の.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までだと2度getElementsを書く必要があった。

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

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

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

  • create
  • bindWithEvent → bind()
  • run → apply()

Object

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

  • Hash
  • has
  • keyOf
  • hasValue
  • extend
  • combine
  • erase
  • get
  • set
  • empty
  • include
  • map
  • filter
  • every
  • some
  • getKeys
  • getValues
  • toQueryString

Browser

  • Browser.Engine.trident
  • Browser.Engine.gecko
  • Browser.Engine.webkit
  • Browser.Engine.presto
  • Browser.Engine.name
  • Browser.Engine.version
  • Browser.Plugins.Flash.version
  • Browser.Plugins.Flash.build

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

Element

  • hasChild →  contains()

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください