TreeView Control: TreeView with Tooltips

Ajax Javascript YUI Tree

このExample（ページへのリンクはこちら）では、Treeを形成する各ノードにTooltipをつける。

TooltipはContainerの一種なので、まだ、サンプリングしていないが、Exampleの説明とソースコードも元にして、サンプルを書いてみる。

このExampleのページでは、以下のように書いてある。

  • テキストノード（TextNode）のそれぞれに、'title'属性をつける。この属性が、ノードのTooltipとして使われる。
  • 各ノードにラベルを配置し、ラベルIDを配列に格納する。この配列をTooltipのコンストラクタに食わせる。（YAHOO.widget.TooltipのAPIドキュメントはこちら。実際にあは、APIドキュメントの下の方にある「Configuration Attrites」の「context」に、その配列を使用する）

以下がサンプルの初期画面である。YUIに掲載されているExampleの画面と殆ど変わりがない。

以下がTooltipを表示させたところである。

以下のJavscriptを含む、HTMLの全文を示す。Exampleのソースでは、通り得ないif文や実験的なコードが入っているので、その部分は修正を行った。
また、HTML内の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" />
<link rel="stylesheet" type="text/css" href="scripts/yui/container/assets/skins/sam/container.css" />

<style type="text/css" id="defaultstyle">
#container {
	margin: 2px;
	padding: 3px;
	width: 300px;
	height: auto;
	border:1px dashed #999999;
}
#treeDiv1 { 
	background: #fff 
}
</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/container/container-min.js"></script>
<script type="text/javascript">
//
//モジュールパターンで、サンプルのソースを書き直した。
//
YAHOO.namespace("EGP");

YAHOO.EGP.TtTree = function() {
	var tree;
	var tt, contextElements = [];

    function buildRandomTextNodeTree() {
    	
        tree = new YAHOO.widget.TreeView("treeDiv1");

        // 0から7個のトップレベルノードを作る
        for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
            var o = {
				// labelを設定。Tooltipはこのラベルidをキーにtitleを使う。
            	label: "label-" + i,
                // Tooltipは、（自動的に）titleを使う。
                title: "This is " + "label-" + i
            };
            // ノード生成
            var tmpNode = new YAHOO.widget.TextNode(o, tree.getRoot(), false);

            // node.renderHidden = true(defaultはfalse)
            // とすると、レンダリングが始めてノードを展開するまで行われない。
            // （画面の初速を早くするためのフラグ）
            //　YUIのサンプルでは、trueにしてあるが、コメントアウト。 
            //　tmpNode.renderHidden = true;

            // TooltipのためにラベルIDを保管。
            contextElements.push(tmpNode.labelElId);

        	// 10個の子ノードを作る。
            buildLargeBranch(tmpNode);
        }

        // レンダリング
        tree.draw();
    }

	// 10個の子ノードを作る。
    function buildLargeBranch(node) {
        //if (node.depth < 10) {　このプログラムではありえないので、コメントアウト
            for ( var i = 0; i < 10; i++ ) {
                var o = {
       		    // labelを設定。Tooltipはこのラベルidをキーにtitleを使う。
                    label: node.label + "-" + i,
                    // Tooltipは、（自動的に）titleを使う。
                    title: "This is " + node.label + "-" + i
                };
                // ノード生成
                var tmpNode = new YAHOO.widget.TextNode(o, node, false);
                // TooltipのためにラベルIDを保管。
                contextElements.push(tmpNode.labelElId);
            }
        //}
    }

    return{
    	init: function() {
		// Treeを作りながら、Tooltip用のデータcontextElementsを作る。
		buildRandomTextNodeTree();
	        // ツールチップの生成
	        tt = new YAHOO.widget.Tooltip("tt", 
	    	        { 
		            // 引数contextは、ツールチップの要素。
		            // contextElementsには、nodeのラベルidが入っている。
	                    context: contextElements 
	            	}
            );
    	}
    };
}();

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

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class=" yui-skin-sam">
<div id="container">
<p>
ツールチップ付のテキストノードのサンプルです。
</p>
<div id="treeDiv1"></div>
</div>
</BODY>
</HTML>