prototype.js 1.5.0_pre0 の $$() のデモ

comments(4) | trackback(0)

  prototype.js 1.5.0_pre0 から $$() という関数が使えるようになりました．
  これは，CSS のようなのセレクタを使って要素を指定できるもので，ChangeLog によると

$$('div#page p.summary img').each(Element.hide)

  これで，id が page な div の孫要素で，class が summary の p の孫要素 img が選択できます．
  早速，これを使って，フォームの入力項目の disable を切り替えるデモを作ってみました．

- prototype.js 1.5.0_pre0 の $$() のデモ
  http://pocari.org/demo/prototype-1.5.0_pre0-daller-daller/

  

  ただし，これ，Firefox 以外では動きません．Opera 8.5 でも Netscape 7.1 でも動きません．
  でも，せっかく作ったので公開しておきます．
  ちなみに Firefox 1.5.0.1 で動作確認をしています．

  JavaScript のソースは以下のようになっています．

var ToggleForm = Class.create();
ToggleForm.prototype = {
    initialize: function () {
        $('input_on').checked = true;
        // form#menu input.item にイベントハンドラを追加
        $$('form#menu input.item').each(this.addToggleEvents.bind(this));
    },
    addToggleEvents: function (value, index) {
        // value は form#menu input.item の要素 (入力可能/入力不可)
        Event.observe($(value), 'click', this.toggle.bindAsEventListener(this), false);
    },
    toggle: function (event) {
        // イベントが発生した要素
        var element = Event.element(event);
        this.disabled = $F(element) == 0 ? true : false;
        $$('form#register input').each(this.doToggle.bind(this));
    },
    doToggle: function (value, index) {
        // value は form#input input の要素 (名前，メールアドレス...)
        $(value).disabled = this.disabled;
    }
};

Event.observe(window, 'load', function () {
    new ToggleForm();
}, false);

  まず以下のように

$$('form#menu input.item').each(this.addToggleEvents.bind(this));

  で，id が menu なフォームで class が item な 孫要素 input それぞれに対して，click なイベントハンドラを追加していきます．
  デモページの [入力可能]，[入力不可] の部分です．そして，

addToggleEvents: function (value, index)

  ここで，実際にイベントハンドラを追加しています．

  イベントが発生した場合は

toggle: function (event)

  が実行されてこの中では，

$$('form#register input').each(this.doToggle.bind(this));

  このように，id が register な form の 孫要素 input に対して処理が行われるようになっています．

  流れとしては単純なのですが，前述のように Firefox 以外では動きませんね……
  とりあえず，ここまでとして，いったん公開しておきます．