かるあ のメモ

アクセスカウンタ

zoom RSS Slider Extender のイベントハンドラを設定する。

<<   作成日時 : 2007/09/26 23:29   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

SliderExtenderについて(Insider.NET 会議室) 久々に @IT 会議室より。
Slider Extender のつまみをドラッグしたときにだけ現在の値を表示したいという要望。

まず Extender に対するイベントにどんなものがあるのかを確認します。
Extender のソースを見るのが一番楽なんだけれど、 AJAX Class Browser をダウンロードして、該当の Extender をプロジェクトに読み込ませるという方法もあります。
たとえばマスターページに Slider Extender をドロップしてから AJAX Class Browser を表示するとこんな風に表示されます。
画像

これを見ると Slider Extender には 4 つのイベントが存在するようです。
    // Events
    public event Object slideEnd { add; remove; };
    public event Object slideStart { add; remove; };
    public event Object sliderInitialized { add; remove; };
    public event Object valueChanged { add; remove; };

なので、画面ロード時に Slider Extender のオブジェクトを取得した後に以下のようにすることでイベントを設定することができます。
var slider = $find("pageSlider");
slider.add_slideStart(function() {
  var boundControl = $get(slider.get_BoundControlID());
  boundControl.style.display = "block";
});

slider.add_slideEnd(function() {
  var boundControl = $get(slider.get_BoundControlID());
  boundControl.style.display = "none";
});

このコードをどこに入れるかですが、単純に RegisterStartupScript なんかで書きだすと、Extender の作成前にスクリプトが実行されてしまうので Sys.Application.init 後に動くようにしないといけません。
なので pageLoad にいれるか、 Sys.Application.load へ登録してあげるかのどちらかになると思います。
それぞれこんなコードを RegisterStartupScript で書き出してあげましょう。

■ pageLoad で定義
ScriptManager をページに配置した場合、 pageLoad というメソッドはbody の読み込みが終了したときに 暗黙的 に実行されます。なので <body onload="pageLoad()" /> といった定義は不要です。
function pageLoad() {
  var slider = $find("pageSlider");
  slider.add_slideStart(function() {
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "block";
  });
 
  slider.add_slideEnd(function() {
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "none";
  });
}


■ Sys.Application.load に登録する
この場合 ScriptManager より後で定義しないと各種クラス群が定義前なのでスクリプトエラーになります。まぁ Script.RegisterStartupScript で書き出せば大丈夫かな。
Sys.Application.add_load(function() {
  var slider = $find("pageSlider");
  slider.add_slideStart(function() {
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "block";
  });
 
  slider.add_slideEnd(function() {
    var boundControl = $get(slider.get_BoundControlID());
    boundControl.style.display = "none";
  });
});


@ITのほうにも書いたけれど、たぶんこのあたりも Animation のように XML で定義型のプログラミングに移行していくんだろうなぁ〜

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Slider Extender のイベントハンドラを設定する。 かるあ のメモ/BIGLOBEウェブリブログ
文字サイズ:       閉じる