ツリービューを表示する

　yuiでは手軽にツリービュー（メニュー）を構築することができます。まず、以下のyuiライブラリファイルが必要です。


　これらのライブラリを読み込んだら次はHTMLタグを用意します。ツリービューを構築するためのdivタグを１つだけ用意します。入れ子になっているツリービューの場合でも１つで大丈夫です。サンプルではtreee1というid名にしています。次にスタイルシートとツリーメニューで利用する画像を用意します。デフォルトの画像はyuiライブラリをダウンロードした際に含まれているサンプル内に用意されています。
　これでツリービューの構築準備は完了です。ツリービューはYAHOO.widget.TreeView()を使い、パラメータにdivタグのid名を指定します。次にgetRoot()でツリービューの基準を求めます。ここではホームというフォルダ内に素材集という項目を作成します。新しく項目を追加するにはYAHOO.widget.TextNode()を使います。
　YAHOO.widget.TextNode()の最初のパラメータは項目名、次が挿入位置、その次が展開して表示するかどうかのフラグになります。falseで閉じた状態になりtrueで展開された状態になります。
　設定が終わったらdraw()でツリービューを表示します。実際のサンプルは以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Tree View (ツリービュー：折りたたみ式メニュー）</title>
<link rel="stylesheet" href="css/tree.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/treeview.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// ツリービュー初期化
var tree;
window.onload = function () {
tree = new YAHOO.widget.TreeView("tree1");
var root = tree.getRoot();
var tmpNode1 = new YAHOO.widget.TextNode("ホーム", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("素材集", tmpNode1, false);
tree.draw();
 }
// --></script>
</head>
<body>
<h1>yuiツリービューサンプル</h1>
<div id="tree1"></div>
</body>
</html>

　実行してみると確かにツリービューとして機能します。しかし、素材集と表示された文字をクリックしても何も反応しません。これはリンクが設定されていないためです。yuiライブラリでは作成した項目（ノード）のhref属性にURLを指定しないとクリックしても指定したページに移動しません。以下のサンプルでは作成した項目にhref属性を指定しクリックしたら該当ページに移動するようになっています。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Tree View (ツリービュー：折りたたみ式メニュー）</title>
<link rel="stylesheet" href="css/tree.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/treeview.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// ツリービュー初期化
var tree;
window.onload = function () {
tree = new YAHOO.widget.TreeView("tree1");
var root = tree.getRoot();
var tmpNode1 = new YAHOO.widget.TextNode("ホーム", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("素材集", tmpNode1, false);
tmpNode2.href = "http://www.openspc2.org/sozai/photo/";
 tree.draw();
}
// --></script>
</head>
<body>
<h1>yuiツリービューサンプル (2)</h1>
<div id="tree1"></div>
</body>
</html>

　基本的な原理はこれで終わりです。入れ子にしたり複数の項目を追加しリンクを指定する場合は以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Tree View (ツリービュー：折りたたみ式メニュー）</title>
<link rel="stylesheet" href="css/tree.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/treeview.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// ツリービュー初期化
var tree;
window.onload = function () {
tree = new YAHOO.widget.TreeView("tree1");
var root = tree.getRoot();
var tmpNode1 = new YAHOO.widget.TextNode("ホーム", root, false);
var tmpNode2 = new YAHOO.widget.TextNode("公開フォルダ", tmpNode1, false);
var tmpNode3 = new YAHOO.widget.TextNode("素材集", tmpNode2, false);
tmpNode3.href = "http://www.openspc2.org/sozai/photo/";
var tmpNode4 = new YAHOO.widget.TextNode("映像サンプル", tmpNode2, false);
tmpNode4.href = "http://www.openspc2.org/HDTV/";
tree.draw();
}
// --></script>
</head>
<body>
<h1>yuiツリービューサンプル (3)</h1>
<div id="tree1"></div>
</body>
</html>

　もっと手軽にツリービューを構築したい場合には高橋さんがAll Aboutで解説していますので、そちらを参考にしてみてください。

[目次へ]

(2006.5.15)