mootools 1.11 リファレンス

ただいま作成中です。(最終更新：2007-08-29 9:40, OptionsとGroupを追加)

軽い、速い、ウマいなmootools Javascriptフレームワークのリファレンスです。使わない部分も多いので抜かしている部分や間違っているところもあるかもしれませんが、もし問題を見つけたらdaisukeアットマークendeworksどっとjpまでメールしてください。

リファレンス目次

functions

$defined

API

メソッド引数戻り値説明ファイル
$defined(obj) obj: 任意の変数 boolean 指定された変数objがnullであれば負、なければ正を返す Core.js
$type(obj) obj: 任意の変数 string 指定された変数objの型を文字列として返す。 Core.js
$merge(obj1[, obj2, obj3, ...]) obj: 任意のobject object 指定された複数のobject objのデータを統合し、結果を返します Core.js
$extend(class, class2[, class3, ...]) class: 任意のクラス object Core.js
$native(...) - - - Core.js
$native.generic(...) - - - Core.js
$chk(obj) obj: チェックするオブジェクト boolean objがnullでなく、obj === 0では無い事を確認する Core.js
$pick(obj, picked) obj: 任意のオブジェクト
picked: 任意のオブジェクト		 depends objがnullでなかったらobj、nullだったらpickedを返す。 Core.js
$random(min, max) min: 最低値
max: 最大値		 number minからmaxまでの間のランダムな整数を返す Core.js
$time() - number 現在の時刻をミリ秒で返す。new Date().getTime()と同じ Core.js
$clear(timer) - - - Core.js
$A(...) - - - Array.js
$each(iterable, fn, bind) iterable: Arrayもしくはobject
fn: 実行する関数
bind: 関数のthisにbindする変数		 - 対象のiterableの各要素に対してfnを実行する。ietrableがArrayでもObjectでも同様に機能するので対象がどちらでも良い時に同じAPIを使える。 Array.js
$(id) id: 取得したいエレメントのID、もしくはDOMオブジェクト。 Element HTML要素のIDを文字列として渡すと、そのIDで指定された要素を返す。指定されたIDが存在しない場合はnull/undefinedを返す。をブラウザネイティブなDOMを渡した場合はmootoolsのElementオブジェクトに変換されたものが返ってくる。 Element.js
$$(...) - - - Element.js
$$.unique(...) - - - Element.js
$E(...) - - - Element.Selectors.js
$ES(...) - - - Element.Selectors.js

Class

API

メソッド引数戻り値説明ファイル
empty() - function 空の関数を返す Class.js
extend(properties) - - - Class.js
implement(classes) - - - Class.js

Chain

SYNOPSIS

エフェクト等を連鎖的に実行する時に使用する。

箱

reset start

API

メソッド引数戻り値説明ファイル
chain(function) - - - Class.Extras.js
callChain() - - - Class.Extras.js
clearChain() - - - Class.Extras.js

Options

SYNOPSIS

オブジェクトを定義する時のユーティリティ。コンストラクタ等で渡されたオプションをデフォルト値を考慮しつつthis.optionsに格納する。

API

メソッド引数戻り値説明ファイル
setOptions(arguments) - - - Class.Extras.js

Array

SYNOPSIS

配列オブジェクトにメソッドを追加します。

forEach filter map every some

API

メソッド引数戻り値説明ファイル
forEach(function) function: 配列の要素毎に実行する関数 array リストの各要素に対してfunctionを実行します。 Array.js
each(function) function: 配列の要素毎に実行する関数 array forEachへのエイリアス Array.js
filter(function) function: 配列の要素毎に実行する関数 array 配列の要素からfunctionを実行した時に評価結果が正となる要素を抜き出し、返す。 Array.js
map(function) function: 配列の要素毎に実行する関数 array 配列の要素からfunctionを実行した結果を返す。 Array.js
every(function) function: 配列の要素毎に実行する関数 boolean 配列の全ての要素がfunctionで指定される条件を満たしていた場合正を返し、それ以外の場合は負を返す。 Array.js
some(function) function: 配列の要素毎に実行する関数 boolean 配列の要素のうち最低一つがfunctionで指定される条件を満たしていた場合正を返し、それ以外の場合は負を返す。 Array.js
indexOf(item, from) item: 探す要素
from: 検索を開始する位置		 integer 配列からitemを探し、その位置を返す。fromを指定すると検索をその位置から開始する。 Array.js
copy(start, length) start: コピー開始位置
length: コピーする要素数		 array 配列をstart位置からlength個分の要素コピーし、新しい配列を返す Array.js
remove(item) item: 配列から削除する要素 array 配列からitemを削除し、その削除した結果の配列を返す Array.js
contains(item, from) item: 探す要素
from: 検索を開始する位置		 boolean 配列からitemを探し、その要素が配列に存在すれば正を返し、存在しなければ負を返す。fromを指定すると検索をその位置から開始する。 Array.js
associate(keys) keys: 連想配列のキー object 配列から連想配列を作成する。与えられた配列keysをキーとして、それぞれのキーの要素に対応する位置の要素をその値として戻り値の連想配列を作成する Array.js
extend(array) array: 追加する要素リスト array 配列にarrayで指定された配列要素を追加する。重複要素のチェックは行わない。 Array.js
merge(array) array: 追加する要素リスト array 配列にarrayで指定された配列要素を追加する。重複要素が存在する場合には追加しない Array.js
getRandom() - 配列要素 配列の中からランダムな要素を取り出す Array.js
getLast() - 配列要素 配列の最後の要素を取り出す Array.js
include(item) item: 追加する要素 array 配列に指定された要素itemを追加する。すでにその要素が配列内に存在する場合は追加を行わない Array.js
rgbToHsb() - - - Color.js
hsbToRgb() - - - Color.js

String

文字列を扱うStringクラスの拡張

API

メソッド引数戻り値説明ファイル
test(regex, params) regex: 正規表現(RegExpオブジェクト）もしくは正規表現を表す文字列
params: RegExpコンストラクタへの引数		 boolean 文字列が正規表現regexを適用した時の戻り値を返す String.js
toInt() - number 文字列にparseInt()を書けた時の戻り値を返す String.js
toFloat() - number 文字列にparseFloat()を書けた時の戻り値を返す String.js
camelCase() - string 文字列をcamelCaseに変更する（camel_case_me -> camelCaseMe) String.js
hyphenate() - string camelCaseな文字列をhyphenでつなげるように変更する（hyphenateMePlease -> hyphenate-me-please) String.js
capitalize() - string 文字列中の小文字を全て大文字に変換する String.js
trim() - string 文字列の最初と最後の空白を削除する String.js
clean() - string 2文字以上のタブ等の空白を半角スペース１個に圧縮した後にtrim()をかける String.js
rgbToHex() - - - String.js
hexToRgb() - - - String.js
contains() - - - String.js
escapeRegExp() - - - String.js

Function

Function.delay

API

メソッド引数戻り値説明ファイル
create(options) - function

クロージャの詳細動作を設定し、新規に作成する。optionsに指定できる引数は以下の通り：

bind 関数を実行する時に"this"が指すものを指定する
event イベントリスナーとして実行される場合は真を指定する
arguments 関数が実行される際に渡される引数を指定する
delay 何ミリ秒後に関数が実行されるか指定する
periodical 定期的に実行する場合の周期をミリ秒で指定する
attempt 関数を実行してみて、エラーが起こらなければ関数の結果を返し、エラーが起これば負を返す。

なおdelay, periodical, attemptは同時に指定する事はできない

 Function.js
pass(args, bind) - - - Function.js
attempt(args, bind) - - - Function.js
bind(bind, args) - - - Function.js
delay(delay, bind, args) - - - Function.js
periodical(interval, bind, args) - - - Function.js
bindAsEventListener(bind, args) - - - Function.js

Number

API

メソッド引数戻り値説明ファイル
toInt() - - - Number.js
toFloat() - - - Number.js
limit(min, max) - - - Number.js
round(min, max) - - - Number.js
times(function) - - - Number.js

Element

HTML要素にアクセスするためのメソッドを追加します。

SYNOPSIS

API

メソッド引数戻り値説明ファイル
new(tag[, properties]) tag: 要素のタグ名
properties: 要素の属性		 Element

新規にHTML要素を作成します。

new Element('br').injectInside(parent); /* <br /> */

propertiesを指定すると、要素作成時に属性を指定できます。テキストコンテントがある場合はsetText()を使用します。

new Element('a', { id: 'link', href: 'http://example.com' }).setText("This is a link").injectInside(parent); /* <a id="link" href="http://example.com>This is a link</a> */

またpropertiesにeventsを指定すると、イベントハンドラーを指定する事ができます。

new Element('a', { id: 'link', href: 'http://example.com', events: { click: function(e) { alert("clicked!"); } } }).setText("This is a link").injectInside(parent);
inject(el, where) el: 新規要素を挿入する場所の基準となる要素
where: 'before', 'after', 'top', 'bottom'(*)のいずれか		 Element 新規要素eと、すでにDOMに組み込まれている要素elがあった場合に、e.inject(el, where)で新規要素をDOMに挿入することができる。whereはelを基準として、どの位置に挿入するかに使用する。 Element.js
injectBefore(el) el: 挿入位置の基準となる要素 Element 新規要素をelの前(previousSibling）の位置に挿入する Element.js
injectAfter(el) el: 挿入位置の基準となる要素 Element 新規要素をelの後(nextSibling）の位置に挿入する Element.js
injectInside(el) el: 挿入位置の基準となる要素 Element 新規要素をelの中(lastChild）の位置に挿入する Element.js
injectTop(el) el: 挿入位置の基準となる要素 Element 新規要素をelの中(firstChild）の位置に挿入する Element.js
adopt(...) - - - Element.js
remove() - XXX 要素をDOMから削除する Element.js
clone(...) - - - Element.js
replaceWith(...) - - - Element.js
appendText(...) - - - Element.js
hasClass(...) - - - Element.js
addClass(...) - - - Element.js
removeClass(...) - - - Element.js
toggleClass(...) - - - Element.js
setStyle(...) - - - Element.js
setStyles(source) source: オブジェクトか文字列 Element 複数のスタイル情報を一気に設定します。sourceにオブジェクトを指定した場合はオブジェクトのキーに対応するCSSプロパティを設定し、sourceが文字列だった場合はcssTextにその文字列を代入します。 Element.js
setOpacity(...) - - - Element.js
getStyle(...) - - - Element.js
getStyles(...) - - - Element.js
walk(...) - - - Element.js
getPrevious() - - - Element.js
getNext() - - - Element.js
getFirst() - - - Element.js
getParent() - - - Element.js
getChildren() - - - Element.js
hasChild() - - - Element.js
getProperty(...) - - - Element.js
removeProperty(...) - - - Element.js
getProperties(...) - - - Element.js
setProperty(...) - - - Element.js
setProperties(...) - - - Element.js
setHTML(...) - - - Element.js
setText(...) - - - Element.js
getHTML() - - - Element.js
getTag() - - - Element.js
empty() - - HTML要素内の全ての子要素を削除する Element.js
addEvent(type, function) type: イベント名
function: イベント発生時実行する関数		 Element Events.addEvent Element.js
fireEvent(type, args, delay) type: イベント名
args: コールバック関数に与える引数
delay: イベント発生までに待つ時間（ms)		 Element Events.fireEvent Element.js
removeEvent(type, function) type: イベント名
function: イベント発生時実行する関数		 Element Events.removeEvent Element.js
getElements(selector, nocash) - - - Element.Selector.js
getElement(selector) - - - Element.Selector.js
getElementsBySelector(selector, nocash) - - - Element.Selector.js
getElementById(className) - - - Element.Selector.js
getElementByClassName(clasName) - - - Element.Selector.js
getValue() - - select, input, textareaの現在の値を返す Element.Form.js
getFormElements() - - select, input, textarea要素を抜き出してリストとして返す Element.Form.js
toQueryString() - - - Element.Form.js
scrollTo(x, y) - - - Element.Dimensions.js
getSize() - object

スクロール情報と要素の縦横サイズをobjectとして返す

function DisplayBoxSize(el) { document.write(Json.toString($(el).getSize())); }

これを上記コードが入っているdivに対して実行すると以下のような構造体を返します

 Element.Dimensions.js
getPosition(overflown) - object - Element.Dimensions.js
getTop(overflown) - number - Element.Dimensions.js
getLeft(overflown) - number - Element.Dimensions.js
getCoordinates(overflown) - object - Element.Dimensions.js

Events

mootoolsにおけるEventはもちろんマウスクリックや画面リサイズ等のブラウザやユーザーからのイベントを処理する時にも使いますが、プログラマーがカスタムイベントを作成／実行できる点が特徴と言えます。

Eventsは様々なクラスで参照されていますので、そのそれぞれのクラスで同様に扱う事ができます：Element, XHR。例えばXHRクラスで一連の処理を終えた後にカスタムイベントを発生させるには以下のようなコードをかきます：

var xhr = new XHR( { onComplete: function(text) { ... do some stuff ... this.fireEvent('ready'); } }); xhr.addEvent('ready', function() { alert("I'm ready!") }); xhr.send('http://some/url');

API

メソッド引数戻り値説明ファイル
addEvent(type, function) type: イベント名
function: イベント発生時実行する関数		 depends イベント発生時に実行する関数を登録する事ができます。イベント名は'click'や'mouseover'のようなブラウザが発行するイベントから、任意のカスタムイベントもトリガーとして扱う事ができます。（カスタムイベントの場合はfireEvent()を使ってイベントを発生させる必要があります Class.Extras.js
fireEvent(type, args, delay) type: イベント名
args: コールバック関数に与える引数
delay: イベント発生までに待つ時間（ms)		 depends イベントを発生させ、登録してあるコールバック関数を走らせます。argsが指定されている場合は関数毎にargsの内容を渡して実行します。delayが指定されている場合はdelayミリ秒待ってからイベントを発生させます。 Class.Extras.js
removeEvent(type, function) type: イベント名
function: イベント発生時実行する関数		 depends イベントtype発生時に実行するように登録してあった関数functionの登録を取り消します Class.Extras.js

Fx.Base

API

メソッド引数戻り値説明ファイル
set - - - Fx.Base.js
start - - - Fx.Base.js
stop - - - Fx.Base.js

Fx.Styles

箱

reset fadeout extend_horizontal

API

メソッド引数戻り値説明ファイル
new(element[, opts]) element: エフェクト対象となるエレメント。
opts: エフェクトオプション。		 - 新たなFx.Stylesインスタンスを作成します Fx.Styles.js
start(styles) styles: スタイルと、そのエフェクト終了時の値 - エフェクトを開始します Fx.Styles.js

Json

SYNOPSIS

任意の構造体をJSON形式にエンコード／デコードします。

API

メソッド引数戻り値説明ファイル
toString(obj) obj: JSON形式に変換する値 string 任意の変数をJSON文字列としてエンコードします Json.js
evaluate(str, secure) str: JSON形式の文字列
secure: 危険な文字列をJSON評価前にチェックするかどうかのbooleanフラグ		 不定 与えられた文字列をJSON文字列として評価し、結果を返します、 Json.js

XHR

SYNOPSIS

XmlHttpRequestをブラウザ互換で扱えるようにしてくれます

API

メソッド引数戻り値説明ファイル
new - XHR XHR.js
send(url, query - XHR XHR.js

Group

SYNOPSIS

注意！ 1.11のバージョンはコンストラクタの引数にリストを使えないので使いにくい。1.2 (SVNレポジトリにあるバージョン）はこの問題が解決されている。現実的にはリストを使えないのは致命的なので筆者は1.2しか使っていないので、この解説も1.2のそれに相当する

API

メソッド引数戻り値説明ファイル
new([ list | obj, obj, obj ]) Group Group.js
addEvent(name, fn) - Group Group.js

Window

API

メソッド引数戻り値説明ファイル
getWidth() - number - Window.Size.js
getHeight() - number - Window.Size.js
getScrollWidth() - number - Window.Size.js
getScrollHeight() - number - Window.Size.js
getScrollLeft() - number - Window.Size.js
getScrollTop() - number - Window.Size.js
getSize() - object

ブラウザのスクロール情報と要素の縦横サイズをobjectとして返す

function DisplayWindowSize() { document.write(Json.toString(window.getSize())); }

これを実行すると以下のような構造体を返します

 Window.Size.js
getPosition() - object - Window.Size.js