ツリービュー制御
       ホームページ作成用ミニツール

どんなソフト?
ツリービュー表示を行い、ツリーのクリックに連動して情報ウインドウを更新することができます。
動作環境
E5以上及びN6以上のブラウザ
使い方
  1. ダウンロードされた treeview.zip を解凍すると以下のファイルが出てきます。
    treeviewlist.html・・・ツリービューと情報ページのフレーム表示
    treeview.html・・・ツリービュー呼び出しプログラム
    treeview.js・・・ツリービュークラスの本体
    treeview.css・・・ツリービュー用のカスケードスタイルシート
    regist.js・・・ツリー登録用プログラム(サンプルが入っています)
    nodeimg1.gif・・・ノードイメージ(展開前)
    nodeimg2.gif・・・ノードイメージ(展開後)
    nodeimg3.gif・・・ノードイメージ(ノードなし)
    listview.html・・・初期ページのサンプル
    listview0.html・・・ルートページのサンプル
    listview1.html・・・第1階層1ページのサンプル
    listview2.html・・・第1階層2ページのサンプル
    listview3.html・・・第2階層1ページのサンプル
  2. ツリービューに登録したいアイテムを regist.js に定義します。
    登録方法は以下の通りです。
    1. ルートアイテムを登録します。
      var itemRoot = TreeView.CreateRoot("ルート", "listview0.html", 0); hInstItemList[nSel++] = itemRoot;
    2. ルート以下のアイテムを登録します。
      itemChild1 = TreeView.AddItem(itemRoot, "第1階層1", "listview1.html", 0); hInstItemList[nSel++] = itemChild1;
      ※アイテムの下に子アイテムを追加する場合には第1パラメータに親のオブジェクトを指定します。
    3. クリックイベントを登録します。
      asTreeString[nCountString++] = "<a href='JavaScript:void(0);' onclick='ClickTreeItem(hInstItemList[0])'>"
      ※hInstItemList[0]の配列にアイテムのオブジェクトリストを作成します。hInstItemList[0]・・・hInstItemList[3]と登録していきます。
    4. アイテムクリック時に連動して表示させるページ(第3パラメータで指定したファイル名)に表示させたい内容を書き込みます。
動作サンプル
サンプル
作者のコメント
WindowsのTreeView APIに似せて作ってみました。基本的なメソッドしか用意していませんがとりあえずは十分に使えると思います。登録数や階層も制限を設けていませんので、メモリが許す範囲で使用できるはずですが、階層を深くして、すべてを展開してしまうと激重になりますのでご注意下さい。そのうち、もう少し使いやすくするかも知れません。。
ダウンロードしてみる
treeview.zip をDownLoadする