Yahoo! UI Library: TreeView[Menu]

Yahoo! UI Libraryで提供されているtreeview.jsを使ってメニュー形式のツリー表示を行います。

フォルダとの違いは、expandAll(全て展開)ができないということです。
【基本:Yahoo! UI Library: TreeView[Folder]】

Yahoo! UI Library: TreeViewで準備するもの

最初にYAHOO.jsとtreeview.jsの2つのスクリプトを用意します。無い場合は、 Yahoo! UI Library: TreeViewから ダウンロードします。

TreeViewは、innerHTMLを使ってHTMLを出力します。そのため出力先となるタグ(id)を用意する 必要があります。例えば、HTMLに次のようなタグを用意します。

<div id="bn_tree"></div>

次にTreeView用の画像とスタイルシートを用意します。配布されているファイルのsrcディレクトリに cssフォルダとimgフォルダがあります。各フォルダのfoldersフォルダを参考にスタイルや画像を作成します。

メニュー形式の場合、基本は4つ画像になります。expand(広げる),collapse(折り畳む),それぞれのhover (カーソルがあたった時)の画像を用意します。

メニュー形式のツリーを作成する

ツリーを作成したいHTMLで次のようにJavaScriptを参照するよう定義します。

<script type="text/javascript" src = "./YAHOO.js"></script>
<script type="text/javascript" src = "./treeview.js"></script>

Yahoo! UI Libraryで提供されているTreeViewオブジェクトのインスタンスを作成します。ここで指定する引数は、 ツリーを表示するタグのidを指定します。

var tree;
tree = new YAHOO.widget.TreeView("bn_tree");

TreeViewのインスタンスを作成すると、RootNodeも作成されます。

RootNodeが作成されているので、このRootNode対してMenuNode(1レベル)を追加します。

var nodes = new Array();
nodes[0] = new YAHOO.widget.MenuNode("Menu1", tree.getRoot(), false);
tree.draw();

getRoot()メソッドでRootNodeオブジェクトを取得します。MenuNodeにRootNodeを 指定して新規にMenuNodeを作成します。

draw()メソッドで、HTMLを生成してinnerHTMLを行います。

上記例でトップレベルのメニューが作成されました。サブメニューを作るには、次のように第2引数に 親ノードを指定しサブメニューのノードを作成します。

var nodes = new Array();
nodes[0] = new YAHOO.widget.MenuNode("Menu1", tree.getRoot(), false);
nodes[1] = new YAHOO.widget.MenuNode("Menu1-1", nodes[0], false);
tree.draw();