Yahoo! UI Library: TreeView[Folder]

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

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

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 フォルダを参考にスタイルや画像を作成します。

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

ツリーを作成したい 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:"https://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:"https://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」を最後につけます。