Ajaxの習作：MSDNのツリー（ぽい物）を実現する。

  1. はじめに

    2. ホームページにツリー上のメニューがあると、ユーザが操作することにより、必要な部分だけを見られるようにできて良いな、と思ってAjaxの練習を兼ねてツリービュークラスを作成してみました。
    作成期間：2006/04/01～2006/05/01

    註１：2006/04/28 JavaScript++かも日記　から Yahoo!のライブラリにツリービューがあることを知る。
    JSONを使用するコンセプトからして同じ。orz（JSONを使用する方向になるのは当然か？他は、XMLとかべたのテキスト・CSVくらいだろうからなぁ。）
    しかも、（やはりというか）Yahoo!のライブラリの方がインターフェースが洗練されている。
    おいらの作成した物は、枝や展開格納点を全角の罫線、正負記号を使用しており、野暮ったく見える。変更可能にできるか検討しようか？
    でも、子の要素を動的ローディングできるところは、ウチのオリジナルだっ！と慰める。（どれだけ使用するかというと疑問が残るのだが:-p）
    （ちなみに、ツリービューのテストでは、全展開、全格納をすると強調が消えるようだが？）

    註２：2006/05/04 古本屋で「使えるJavaScript ＆ DynamicHTMLサンプル大全」（萩原 真一著 秀和システム発行）を購入。こちらもツリーメニューのサンプルがある。しかし、クリックごとにdocument.writeで書き換えている。

  2. 作成

    3. 以下のフェーズを経て作成する。（2006/05/01 現在 フェーズ４を公開）

    フェーズ１

    子を展開・格納する

    divタグに対してstyleのdisplayにblock/noneを指定することにより範囲の表示・非表示の制御を行う。

    フェーズ２

    JSON形式のデータを使う（スクリプトに埋め込む）

    表示データを動的に生成するために、まずは関数を作る。
    JSON形式のデータは、埋め込みで。

    フェーズ３

    JSON形式のデータを使う（サーバからデータを取得する）
    Ajaxの真骨頂 XMLParserを使用して、動的に読み込む。

    フェーズ４

    クラスにする
    クラス化により、複数のツリーを（１つのwindowで）制御できるようにする。