YUI2.7.0+PHP5でメニューを自作する（その２）

Ajax XHR YUI2.7.0 PHP Javascript

先日のログのプログラムを発展させて、

  • 単純なツリー形式にする。
  • 画面にオーバーレイして出現する。

ようにしてみた。


以下は、初期画面のスナップショット。


「Menu」とあるリンクをクリックすると、YUIのAnimを使って、下のようにツリー状のメニューが浮かび上がってくる（このサンプルではやっていないが、絶対位置を指定することで、下の画面に乗っかって表示させることができる）。


「Close」とあるリンクをクリックすると、（これも）YUIのAnimを使って、ゆっくりとメニューが消える。先のログから修正したプログラムは、Javascriptを含むHTMLだけ。
ただし、YUI2.7.0のTreeViewのイベントハンドルが怪しいので（このログを参照方）、YUI2.6.0のtreeview.jsを使用した。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Menu</title> 

<link rel="stylesheet" type="text/css" href="../scripts/lib/yui/build/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../scripts/lib/yui/build/treeview/assets/skins/sam/treeview.css" />

<script type="text/javascript" src="../scripts/lib/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="../scripts/lib/yui/build/connection/connection-min.js" ></script>
<script type="text/javascript" src="../scripts/lib/yui/build/treeview/treeview-min.js" ></script>
<script type="text/javascript" src="../scripts/lib/yui/build/animation/animation-min.js" ></script> 
<style type="text/css" id="defaultstyle">
#main {
	margin: 2px;
	padding: 3px;
}

.ez_error {
	/* red（エラー用） */
	color:#ff0000;
}

/* 「Close」リンク用枠とtreeの枠を収める箱 */
#menuReg {
	margin: 5px;
	position: relative;
	width: 350px;
	height: auto;
	opacity: 0;
	background: #FFFFFF; 
	padding:1em;
	z-index: 2;
	border:2px solid #C0FF3E;
    visibility: hidden;
}

/* 「Close」リンク用枠 */
#closelink {
	margin: 2px;
	position: relative;
	width: 340px;
	height: auto;
	background: transparent; 
	padding:0.5em;
	z-index: 2;
}

/* treeをレンダリングする枠 */
#treeDiv1 {
	margin: 2px;
	position: relative;
	width: 340px;
	height: auto;
	background: transparent; 
	padding:0.5em;
	z-index: 2;
}

/*リンク（メニュー）*/
#lnk1.lnk {
    visibility: visible;
}

/*擬似リンク（閉じる）*/
#lnk2.lnk {
    visibility: hidden;
}
</style>

<script type="text/javascript">

DisplayMenu = function() {
	var Event	= YAHOO.util.Event;
	var Dom		= YAHOO.util.Dom;
	var Connect	= YAHOO.util.Connect;
	var TreeView = YAHOO.widget.TreeView;
	var Anim	= YAHOO.util.Anim;
	var tree;

	/*
	* メニューリンクをクリックしたときのハンドラ
	*/
	var menuClickHdlr = function(_evt){
		Event.preventDefault(_evt);

		// メッセージのクリア
		Dom.get('msg').innerHTML = '';
		Dom.get('treeDiv1').innerHTML = '';

		var _url	= 'getMenu1.php';
		var _arg ={
			'errId'	:	'msg',
			'resId'	: 	'treeDiv1'
		};
		menuCallback.argument = _arg;
		// ajaxで検証
		YAHOO.util.Connect.asyncRequest('POST',_url,
						menuCallback);
	}
		
	/*
	* メニュー取得時のコールバック
	*/
	var menuCallback = {
    	        success : function(_obj) {
			var _resId = _obj.argument.resId;
			var _errId = _obj.argument.errId;

			// XHRの戻り値の取得（メニュー文字列）
			var _ret = _obj.responseText;

			// メニューの表示
			if(_ret.length > 0){
				Dom.get(_resId).innerHTML = _ret;
				Event.onAvailable(_resId ,
				        function(){
		 	     			//Treeのインスタンス化:
		 		       	 	_tree = new TreeView(_resId);
							_tree.render();
		 	     		}
		 	        );
		 	    
	 	     	        // Animation
	 	     	       Dom.setStyle('lnk1','visibility','hidden');
	 	     	       var attributes = {
	 	   	               opacity: { to: 0.9 }
	 	   	        };

		 		// Animオブジェクトのインスタンス化
			        var anim = new Anim('menuReg', attributes,
	    	    		1,YAHOO.util.Easing.backIn);
				anim.animate(); 	 	   		
				Dom.setStyle('menuReg','visibility','visible');
				Dom.setStyle('lnk2','visibility','visible');
				
			}else{
	 			// エラーのハンドル（皆さん適当に）
				Dom.get(_errId).innerHTML = 'メニューの取得に失敗しました.';
			}
		},
		
     	        failure : function(_obj) {
 			var _errId = _obj.argument.errId;
 			var _ret = 'ステータス: ' + _obj.status + 'ステータステキスト: ' +
 						_obj.statusText + ' メニューの取得に失敗しました。';
 			// エラーのハンドル（皆さん適当に）
 			Dom.get(_errId).innerHTML = _ret;	     
 		}
	 };

	/*
	* メニュークローズをクリックしたときのハンドラ
	*/
	var menuCloseHdlr = function(_evt){
		Event.preventDefault(_evt);
		// Animation
		Dom.setStyle('lnk1','visibility','visible');
		Dom.setStyle('lnk2','visibility','hidden');
		
		var attributes = {
	   	        opacity: { to: 0 }
	   	    };
 		// Animオブジェクトのインスタンス化
	        var anim = new Anim('menuReg', attributes,
	    				1,YAHOO.util.Easing.backIn);
		anim.animate(); 	   		
	};

	return{
    	init: function() {

		// メニューのハンドラー
		Event.on('lnk1',
   			'click',
	        	menuClickHdlr);

  	     	// メニュー・クローズのハンドラー
	        Event.on('lnk2',
	    	       'click',
			menuCloseHdlr);

		}, // initの終わり
	};
}();

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

</script>
</HEAD>

<BODY class="yui-skin-sam">
test_menu2.html
<br>
<div id="container">
<p>
ユーザーのロールに基づいてMenuを取得するサンプルです。<br/>
</p>
<a id="lnk1" href="#" class="lnk">Menu</a>
<div id="msg" class=".ez_error"></div>

<!-- メニュー表示のためのマークアップ -->
<div id = 'menuReg'>
<div id="closelink">
<a id="lnk2" href="#" class="lnk">Close</a>
</div>
<div id='treeDiv1'></div>
</div>

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