Yahoo! UI Library: TreeView[Folder]

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

標準的(フォルダアイコンの無い)とフォルダは、基本的に同じつくりになります。

フォルダ形式イメージ

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

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

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

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

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

フォルダ形式のツリーを作成する

ツリーを作成したいHTMLで次のようにJavaScriptを参照するよう定義します。(buildフォルダ)

<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対して子Nodeを追加します。

var root = tree.getRoot();
var tmpNode = new YAHOO.widget.TextNode("子label", root, false);
tree.draw();

getRoot()メソッドでRootNodeオブジェクトを取得します。次にTextNodeを新規に作成します。 このときの第2引数に親ノードを指定することによってツリーの構造を作成します。

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

上記例で子ノードが作成されました。さらに次のレベル(孫)を作るには、次のように第2引数に 子ノード(tmpNode)を指定し作成します。

var root = tree.getRoot();
var tmpNode = new YAHOO.widget.TextNode("子label", root, false);
var grdNode = new YAHOO.widget.TextNode("孫label", tmpNode, false);
tree.draw();

ノードの追加

TextNodeのインスタンスを作成する時、href属性とtarget属性を与えることができます。

var root = tree.getRoot();
var tmpNode = new YAHOO.widget.TextNode({label:"子label",href:"http://www.bnote.net/",target:"_blank"},
                      root, false);
tree.draw();

ラベルにa要素も含んで指定できるようですが、分けて指定したほうがスタイルシートが適用しやすいようです。

クラス属性を変更する

クラス属性を変更するには、ノードオブジェクトのlabelStyleプロパティを変更します。 デフォルトでは、ygtvlabelに設定されています。

var root = tree.getRoot();
var tmpNode = new YAHOO.widget.TextNode({label:"子label",href:"http://www.bnote.net/",target:"_blank"},
                      root, false);
tmpNode.labelStyle = "新クラス名"
tree.draw();

クラス属性と画像の関係

prefix?としてygtvは、固定のようです。

ygtv + location + type + 疑似クラス

// location top or bottom, middle nodes also get the top style
// type p=plus(expand), m=minus(collapase), n=none(no children)

locationには「t」又は「l」のどちらかが指定されます。

typeには「p」,「m」,「n」のいずれかが指定されます。

疑似クラス(:hover)の場合、「h」を最後につけます。