TreeView Control: Three Ways to Define a TreeView

このExample（ページへのリンクはこちら）では、タイトル通りにTreeを生成する方法が示されている。タイトルは3種となっているが、実際のExampleは（ベースとするTreeも含めると）4種類の方法が示されている。
その4種とは、

ページ内のHTMLから作成
ページ内にすでに存在するTreeViewインスタンスの定義から生成
ページ内にすでに存在するTreeViewインスタンスの枝から生成
TreeViewのコンストラクタの第2引数にオブジェクトリテラルを指定して生成

の4種である。

2-3は、1の定義を再利用して（すなわちコピーして）Treeを生成している。
4は、前3種とは異なり、TreeViewのコンストラクタの第2引数に、Treeを構成させるためのオブジェクトリテラルを食わせるやり方の例となっている（YAHOO.widget.TreeViewのAPIドキュメントはこちら）。

画面は以下のようになる。

以下に、ソースコードを示す。
特に4のケースについて、title属性として指定したものが自動的にTooltipになるのは面白い。
このサンプリングでも、scriptの位置を変えるにあたり、module patternで書き直した。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="scripts/yui/treeview/assets/skins/sam/treeview.css" />

<style type="text/css" id="defaultstyle">
#container {
	margin: 2px;
	padding: 3px;
	width: 300px;
	height: auto;
	border:1px dashed #999999;
}
.whitebg {
	background-color:white;

</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" ></script> 
<script type="text/javascript" src="scripts/yui/treeview/treeview-min.js" ></script>

<script type="text/javascript">
//モジュールパターンで実装する。
YAHOO.namespace("EGP");

YAHOO.EGP.ProgreTree = function() {
	var tree1, tree2, tree3;

	return{
    	init: function() {
    		// 1.Body内にある<div id="markup" class="whitebg">から生成。
		tree1 = new YAHOO.widget.TreeView("markup");
		tree1.render();

    		// 2.Tree1のインスタンス定義から生成。
		tree2 = new YAHOO.widget.TreeView("treeDiv2",
						tree1.getTreeDefinition());
		tree2.render();

    		// 3.Tree1の2つ目のブランチを取得し、その定義より生成。
		var branch = tree1.getRoot().children[1];
		tree3 = new YAHOO.widget.TreeView("treeDiv3", 
						branch.getNodeDefinition());
		tree3.render();
		
    		// 4.TreeViewのコンストラクタの第2引数にオブジェクトリテラル
    		// を指定して生成。（無名関数として実行）
    		// （注） titleに指定したものがTooltipになる。
    		//     MenuNodeを開くと、他の（MenuNodeでないブランチ）も閉じてしまう。
		(new YAHOO.widget.TreeView("treeDiv4",[
			'Label 0',
			{type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'},
			{type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[
				'Label 1-0'
			]},
			{type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'_self'},
			{type:'HTML',html:'<a href="developer.yahoo.com/yui">YUI</a>'},
				{type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[
				'Label 3-0',
				'Label 3-1'
			]}
		])).render();		
    	}
    };
}();

//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
	 //DomReadyイベントで発火するハンドラ
	YAHOO.EGP.ProgreTree.init,
	//ハンドラに渡すオブジェクト（関数）
	YAHOO.EGP.ProgreTree,
	//ハンドラは、上記のオブジェクトのスコープをもつ。   
	true
);
</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class=" yui-skin-sam">
<div id="container">
<p>
以下の4通りの方法でTreeViewが作成されています。
<ol>
  <li>ページ内のHTMLから作成</li>
  <li>ページ内にすでに存在するTreeViewインスタンスの定義から生成</li>
  <li>ページ内にすでに存在するTreeViewインスタンスの枝から生成</li>
  <li>TreeViewのコンストラクタにオブジェクトリテラルを指定して生成</li>
</ol>
</p>
<hr/>
<div id="markup" class="whitebg">
	<ul>
		<li>List 0
			<ul>
				<li>List 0-0
					<ul>
						<li>item 0-0-0</li>
						<li>item 0-0-1</li>

					</ul>
				</li>
			</ul>
		</li>
		<li>item 0-1
			<ul>
				<li><a target="_new" href="HTTP://developer.yahoo.com/yui" 
							title="go to YUI Home Page">YUI</a>
					<ul>
						<li>item 0-1-0</li>

						<li>item 0-1-1</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
<hr/>
<div id="treeDiv2" class="whitebg"></div>
<hr/>
<div id="treeDiv3" class="whitebg"></div>
<hr/>
<div id="treeDiv4" class="whitebg"></div>

</div>
</BODY>
</HTML>