TreeView解説と実験のページ

ホーム

TreeView(YUI:Yahoo! User Interface Library)を実行すると以下のようになります。

リンクをご覧下さい♪

解説

これは、TreeView(Yahoo! User Interface Library:以下YUIと略します)のもっとも単純な例です。

実験

見た目はシンプルで分り易いツリービューですが、いざHTMLへ実装しようとすると、かなりしんどいです(^^;

先ずはじめに実験するための環境を準備するところからなのですが、 このツリービュー用実験環境、少しだけチョッピリ複雑なので、 例として、このページの構成を以下に表します。

以下にtreeviewコントロールを実装する際必要になるタグや、ファイルなどをまとめてみました。

1.YUI ダウンロード <--- ダウンロード方法がわからない人

2.treeview.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>TreeView (YUI:Yahoo! User Interface Library)</title>
<link href="../css/hiroshi1986.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../JScript/yahoo.js"></script>
<script type="text/javascript" src="../JScript/dom.js"></script>
<script type="text/javascript" src="../JScript/event.js"></script>
<script type="text/javascript" src="../JScript/treeview.js"></script>
<link rel="stylesheet" href="tree.css" type="text/css" media="all">
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<h1>TreeView(YUI:Yahoo! User Interface Library)を実行すると以下のようになります。</h1>
<h2>リンクをご覧下さい♪</h2>
<div id="treeData"></div>
</body>
</html>
<head>タグ内のツリービュー関連ファイル呼び出し
HTMLから呼び出すツリビュー関連ファイルは<head> 〜 </head>の間にパスを通して記述します。
<link href="../css/hiroshi1986.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../JScript/yahoo.js"></script>
<script type="text/javascript" src="../JScript/dom.js"></script>
<script type="text/javascript" src="../JScript/event.js"></script>
<script type="text/javascript" src="../JScript/treeview.js"></script>
<link rel="stylesheet" href="tree.css" type="text/css" media="all">
<script type="text/javascript" src="tree.js"></script>

<body>タグ内のツリービュー読み込み用タグ
<div id="treeData"></div> ← この位置にツリーを読み込んで表示する仕掛けです。
追記) ツリーが表示されない場合は、treeview.htmlと、tree.js内のtreeData部分の記述が一致しているか?再度確認してみてください。
ちなみに、treeData以外の名前でも、双方(treeview.htmlと、tree.js)で一致していて、且つ、一意な(他のオブジェクトと区別できる)名前なら大丈夫です。
3.tree.css

このファイルがツリービューの外観を構成しています。
はじめはそのまま使い、慣れてきたらカスタマイズも可能です。
yui/build/treeview/assets/skins/sam/treeview.cssをコピー&貼り付けした後で、 treeview.css → tree.css と名前だけを変更します。

/* CSS TreeView YUI Default Type */
.ygtvtn{width:18px;height:22px;background:url(treeview-sprite.gif) 0 -5600px no-repeat;}
.ygtvtm{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 -4000px no-repeat;}
.ygtvtmh{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 -4800px no-repeat;}
.ygtvtp{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 -6400px no-repeat;}
.ygtvtph{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 -7200px no-repeat;}
.ygtvln{width:18px;height:22px;background:url(treeview-sprite.gif) 0 -1600px no-repeat;}
.ygtvlm{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 0px no-repeat;}
.ygtvlmh{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 -800px no-repeat;}
.ygtvlp{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 -2400px no-repeat;}
.ygtvlph{width:18px;height:22px;cursor:pointer;background:url(treeview-sprite.gif) 0 -3200px no-repeat;}
.ygtvloading{width:18px;height:22px;background:url(treeview-loading.gif) 0 0 no-repeat;}
.ygtvdepthcell{width:18px;height:22px;background:url(treeview-sprite.gif) 0 -8000px no-repeat;}
.ygtvblankdepthcell{width:18px;height:22px;}
.ygtvitem{ height:1%; }
.ygtvchildren{*zoom:1; /* background-color: #ffffff; */}
.ygtvlabel,.ygtvlabel:link,.ygtvlabel:visited,.ygtvlabel:hover
{
margin-left:2px;
text-decoration:none;
/* background-color:white; */
}
.ygtvspacer{height:22px;width:18px;}
4.tree.js

これはツリービューに表示するデータを含む階層構造になっており、自前で作ります。
先ずtree.jsという名前で新しいJavaScriptファイルを作成し、以下のコードをドラッグ&コピーして貼り付けます。
HTMLから見えるツリービューに表示する文字初期状態リンク先アドレス などのデータを含んでいますので、 これらを変更・追加してオリジナルのツリーを構成します。

// JScript ファイル
var tree;
window.onload = function(){
tree = new YAHOO.widget.TreeView("treeData");
var root = tree.getRoot();

var node1 = new YAHOO.widget.TextNode("hiroshiのウェブサイト", root, true);

var cNode1 = new YAHOO.widget.TextNode("BOφWY時代の布袋さんは神様です!", node1, false);
cNode1.href = "http://www.hiroshi1986.net/";

var cNode2 = new YAHOO.widget.TextNode("Hiroshi's Home Page", node1, false);
cNode2.href = "http://www7a.biglobe.ne.jp/%7Ehiroshi-s/";

tree.draw();
}
2008/04/16 上記コードの4行目 treeData(正) ← treeDiv1(誤) 訂正いたしましたm(_ _)m
追記) ツリーが表示されない場合は、treeview.htmlと、tree.js内のtreeData部分の記述が一致しているか?再度確認してみてください。
ちなみに、treeData以外の名前でも、双方(treeview.htmlと、tree.js)で一致していて、且つ、一意な(他のオブジェクトと区別できる)名前なら大丈夫です。

5.初期状態(true:開く、 false:閉じる)の設定例
リンクをご覧ください♪
このページのトップに置いたツリーの[−]をクリックして閉じると、この状態になります。
この例のように最初は閉じた状態で表示させたい場合は、4.tree.jsにてコード6行目の
var node1 = new YAHOO.widget.TextNode("hiroshiのウェブサイト", root, true);
の行末尾true を、false に変更します。