YUIのTreeViewをとりあえず使ってみる

TreeViewのYahoo!による解説ページはこちら
http://developer.yahoo.com/yui/treeview/

1. 必要なJavaScript、CSSのリンクは以下のページで作成。

Serving YUI Files from Yahoo! Servers
http://developer.yahoo.com/yui/articles/hosting/

2. こちらのページの「TreeView Control」ボタンを押すと下にリンクの記述が表示されます。

直接コピペせず(行番号が含まれてしまいます)に「View plain」のリンクで別ウィンドウ表示からコピーするか「copy to clipboard」のリンクでクリップボードにコピーして使いましょう。

3. とりあえずこのリンクの記述を元に以下の様なHTMLファイル(treeview01.html)を準備します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>TreeView01</title>
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/treeview/assets/skins/sam/treeview.css">
	<!-- js -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/event/event-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/treeview/treeview-min.js"></script>
</head>

<body class="yui-skin-sam">
</body>
</html>

4. TreeViewを表示するdivタグをbodyタグの下に追加。

<body class="yui-skin-sam">
	ここに↓TreeViewを表示
	<div id="treeDiv1"></div>
	ここに↑TreeViewを表示

5. 続いてJavaScriptの記述を追加。treeInit()関数を準備し、YAHOO.util.Event.onDOMReady()の引数に設定することでTreeViewが表示されます。

	<script type="text/javascript">
(function() {
	var tree;
	
	function treeInit() {
		tree = new YAHOO.widget.TreeView("treeDiv1");
		var root = tree.getRoot();
		var tmpNode = new YAHOO.widget.TextNode("mylabel", root, false);

		tree.draw();
	}

	YAHOO.util.Event.onDOMReady(treeInit);
})();
	</script>

6. 以上をまとめるとこのようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>TreeView01</title>
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/treeview/assets/skins/sam/treeview.css">
	<!-- js -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/event/event-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/treeview/treeview-min.js"></script>
</head>

<body class="yui-skin-sam">

	ここに↓TreeViewを表示
	<div id="treeDiv1"></div>
	ここに↑TreeViewを表示

	<script type="text/javascript">
(function() {
	var tree;
	
	function treeInit() {
		tree = new YAHOO.widget.TreeView("treeDiv1");
		var root = tree.getRoot();
		var tmpNode = new YAHOO.widget.TextNode("mylabel", root, false);

		tree.draw();
	}

	YAHOO.util.Event.onDOMReady(treeInit);
})();
	</script>
</body>
</html>