Yahoo UIの場合、ツリーUIを構成するにあたり、JavaScript側でひとつひとつノードを生成する方法と、ノード情報を定義したJSONを動的にロードする方法のいずれかを選べる。今回は比較的実装がしやすい<ul>、<li>マークアップを使用した実装方法を紹介する。

HTMLファイル - treeview-yui.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>TreeView / Yahoo UI</title>
<link rel="stylesheet" type="text/css" href="./js/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./js/yui/build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="./js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./js/yui/build/treeview/treeview-min.js"></script>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady
(
    function()
    {
        var tree = new YAHOO.widget.TreeView('tree');
        tree.render();

        // メニュー2-1-1にクリックイベントを登録
        YAHOO.util.Event.addListener('menu_2-1-1', 'click',
            function()
            {
                alert('clicked!');
            }
        );
    }
);
-->
</script>
</head>

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

<h1>TreeView / Yahoo UI</h1>

<div id="tree">
    <ul>
        <li>メニュー1
            <ul>
                <li>メニュー1-1</li>
                <li>メニュー1-2</li>
            </ul>
        </li>
        <li>メニュー2
            <ul>
                <li>メニュー2-1
                    <ul>
                        <li><span id="menu_2-1-1">メニュー2-1-1</span></li>
                        <!-- li は td に置き換えられてしまうため、span にイベント登録用の ID をふっている -->
                        <li>メニュー2-1-2</li>
                    </ul>
                </li>
                <li>メニュー2-2</li>
                <li>メニュー2-3</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ。IEではコメントが解釈・表示されてしまうので実装の際は気をつけよう

ツリー構造を<ul>、<li>で直感的にマークアップで組み立てることができるため、スピーディに実装することが可能だ。またアンカーやイベントの登録も普通のHTMLと同様、そのまま記述することができるのでわかりやすい。ページをロードしてから実行可能になるまでもなかなかの速さだ。