Yahoo! UI Library: TreeViewの基本（その１）

Ajax Javascript YUI Tree

Ajax（XHR）の方も一通り感触がつかめたので、YUIもTreeViewに移動。

TreeViewは、メニューやエクスプローラー風のUIを作るのによい材料なので、基本からやってみる。
なので、TreeViewのトップページにある例からはじめる。

YUIのTreeViewでは、rootになるdivを指定して、その中にul,ol,liなどのリスト形式のタグを記述すれば、自動的に開閉自由のTreeを形成してくれる。Treeのノードを表現するテキストには、liタグで記述されたテキストや、aタグで記述されたアンカーのテキストが設定される。

一番最初の例では、bodyの中に以下のようなdivを用意して、それを自動的にTreeにしてしまうというもの。YAHOO.widget.TreeViewのインスタンスを生成して、draw(render)するだけでよい。

<div id="treeDiv1">
    <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://www.google.co.jp" 
                                                           title="google">Google</a>
			<ul>
			    <li>item 0-1-0</li>
			    <li>item 0-1-1</li>
			</ul>
		    </li>
		</ul>
	</li>
    </ul>
</div>

これを元に作成したTreeViewは以下のようになる。

以下は、上のTreeを展開した時の画面。

以下にJavascriptを含むHTMLの全文を示す。
簡単にTreeが書けることがわかる。

<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;
}
#treeDiv1 {
	background: #fff; 
	padding:1em;
}
</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" src="scripts/yui/utilities/utilities.js" >
</script> 

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

YAHOO.EGP.BasicTree = function() {
	var tree;

    var buildTextNodeTree = function() {
	
	//treeのインスタンス化
        tree = new YAHOO.widget.TreeView("treeDiv1");          

	//Treeの描画
        tree.draw();
    };
	
    return{
    	init: function() {
        	buildTextNodeTree();
    	}
    };
    
}();

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

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class=" yui-skin-sam">
<div id="container">
<p>
HTMLで記述されたdiv,ul,li,から生成されるTreeです。<br/>
テキストノードは、テキスト、aタグで書かれています。
</p>
<div id="treeDiv1">
	<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://www.google.co.jp" title="google">Google</a>
					<ul>
						<li>item 0-1-0</li>
						<li>item 0-1-1</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
</div>
</BODY>
</HTML>