ツリービュー表示

説明

ツリービューを表示するにはYahoo UIライブラリを利用すると簡単です。まず、ツリービューに必要なライブラリファイルを読み込みます。ツリービュー表示に必要なファイルはyahoo.js、dom.js、event.js、treeview.jsです。実際に表示する部分には<div>タグのみ用意しID名を指定しておきます。
プログラムではYAHOO.widget.TreeView()でツリービューオブジェクトを生成します。生成されたツリービューオブジェクトのルートノードを求めます。ツリービューでは表示されるテキストは親ノードを指定する必要があります。最初の項目はルートノードに連結する必要があります。
テキストノードの追加はYAHOO.widget.TextNode()で行います。パラメータには追加するテキストと親ノード、階層化されている場合には、あらかじめ展開表示するかどうかをtrueまたはfalseで指定します。trueを指定すると最初から展開表示され、falseを指定すると展開表示されなくなります。
表示されるテキストがクリックされた時に他のページに移動させる場合には、追加したテキストノードのhrefプロパティに表示するページURLを指定します。
設定が終了したらdraw()メソッドでツリービューを描画します。

JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" href="css/tree.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="treeview.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>ツリービュー</h1>
<div id="treeData"></div>
</body>
</html>
var tree;
window.onload = function(){
tree = new YAHOO.widget.TreeView("treeData");
var root = tree.getRoot();
var node1 = new YAHOO.widget.TextNode("検索エンジン", root, false);
var cNode1 = new YAHOO.widget.TextNode("Google", node1, false);
var cNode2 = new YAHOO.widget.TextNode("Yahoo", node1, false);
var cNode3 = new YAHOO.widget.TextNode("goo", node1, false);
cNode1.href = "http://www.google.co.jp/";
cNode2.href = "http://www.yahoo.co.jp/";
cNode3.href = "http://www.goo.ne.jp/";
tree.draw();
}