まだ私も良く分かってないので調べながらメモっていくつもりで。
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()