« FireBugのインストールと簡単な使い方 | トップページ | Spry framework for Ajax »

2006年7月 3日 (月)

prototype.js その他の便利機能 Part2

少し間があいてしましましたが、prototype.jsの便利な機能の続きです。

Positionクラス
このクラスは、要素の位置を操作する際に使用します。
positionedOffset メソッド
CSSスタイルのpositionを指定していない際に、要素の位置を得る場合に便利です。
引数は要素のインスタンスで、戻り値はleftとtopの数値が格納された配列です。
使用例:
var p = Position.positionedOffset($("ElementId"));
alert("left=" + p[0] + ",top=" + p[1]);

absolutize メソッド
CSSスタイルのpositionをabsoluteにし、位置も計算して設定してくれます。
このメソッドでは内部で$()関数を使用していますので、引数は要素のIDまたはインスタンスでOKです。
この辺は統一してもらえると助かりますね。
使用例:
Position.absolutize("ElementId");

Eventクラス
このクラスは、要素のイベントに関する機能を提供しています。
observe メソッド
addEventListenerの代わりとして使用することが出来ます。
IEはattachEventで、FirefoxなどはaddEventListenerでと使い分ける部分がカプセル化されています。
引数は要素のIDまたはインスタンス、イベント名、イベントを処理する関数、キャプチャを行うかどうかをtrueかfalseで指定します。
この関数で指定したコールバック関数には、引数としてEventオブジェクトが渡ってきます。
使用例:
Event.observe("ElementId", "click", CallbackFunc, false);

stopObserving メソッド
observeメソッドで追加したイベントリスナーを削除します。
引数はobserveメソッドと同じです。
使用例:
Event.stopObserving("ElementId", "click", CallbackFunc, false);

stop メソッド
イベントは親要素へ伝播していきます(イベントバブリング)が、それをキャンセルすることが出来ます。
引数は、イベントリスナーに渡されるEventオブジェクトです。
使用例:
function EventListener(e)
{
    ......
    Event.stop(e);
}

Form.Element.Observer クラス
Form要素の値の変更を監視することが出来ます。
コンストラクタ
Form要素の値の変更を監視する条件などをセットします。
引数は、Form要素のIDかインスタンス、監視する間隔(秒)、値変更時に呼び出される関数です。
使用例:
var w = new Form.Element.Observer("ElementID", 1, CallbackFunc);

getValue メソッド
Form要素の値を取得します。
使用例:
var w = new Form.Element.Observer("ElementID", 1, CallbackFunc);
function CallbackFunc()
{
    var v = w.getValue();
}


などなど、使用頻度の高そうなものを列挙してみましたが、他にもありますので機会があればまた書きたいと思います。

|

« FireBugのインストールと簡単な使い方 | トップページ | Spry framework for Ajax »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10768145

この記事へのトラックバック一覧です: prototype.js その他の便利機能 Part2:

« FireBugのインストールと簡単な使い方 | トップページ | Spry framework for Ajax »