Container Family: Creating a Modal "Loading" Panel

Ajax Javascript YUI Container Panel Modal

Modal表示とは、ある一つの表示エリア以外を「触れないようにする」表示形態のことである。
よく、ログイン画面などで、ユーザーIDとパスワードの入力エリアのみを表示し、認証が行われるまで、バックグラウンドがグレイアウトすることがある。
これが、ログインエリアをモーダルとするModal表示の一つの例。

YUIでは、Panelのコンフィグ・パラメータにmodalであるかどうか、を指定することでModal表示が可能となる。

このExampleでは、デフォルトのスキンを使用している。まず、以下の初期画面をだす。

そして、Show Panelボタンで、Modal表示するPanelをScriptで生成して、そのコンテンツとして、処理待ちのイメージを表示する（下の図）。この間、サーバー側のプログラムをよんで、そのリターンをcallback関数がまっている。

サーバーからの戻りがあると、callback関数によってPanelが消えるようになっている。
Modalに表示するPanelエリアは、Markupによって記述できるので、一般には、

  1. Modalな入力エリア
  2. Modalな処理待ちエリア

と組み合わせるのが普通であろう。

以下にJavascriptを含むHTMLの全体をしめす。
ModalなPanelを生成する際には、PanelのZ軸を値を他より大きくとる必要があるが、これも、コンストラクタに指定するコンフィグ・パラメータの一つとして設定できる。
また、サンプリングでは、サーバー側には、3secだけsleepしたてから、アウトプットを返す簡単なプログラムを配した。

<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/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="scripts/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="scripts/yui/container/container-min.js"></script>

<style type="text/css" id="defaultstyle">
#container {
	margin: 2px;
	padding: 3px;
	width: 400px;
	height: auto;
	border:1px dashed #999999;
}
</style>

<script type="text/javascript">
YAHOO.namespace("example.container");

// YAHOO.example.containerにModalPanelを追加する。
YAHOO.example.container.ModalPanel = function() {
	var Event = YAHOO.util.Event;
	var Dom = YAHOO.util.Dom;
	var wait,content;

	var clickHandler = function(){
		content = document.getElementById("content");
    	content.innerHTML = "";

    	// Panelは一回だけ生成する。
        if (!wait) {

    	    wait = new YAHOO.widget.Panel("wait",  
                                { 	width: "240px", 
                                    fixedcenter: true, 
                                    close: false, 
                                    draggable: false, 
									// 一番上に出す。
                                    zindex:4,
									// Modal指定。
                                    modal: true,
									// showされるまでは見えない。
                                    visible: false
                                 } 
        	);
        	wait.setHeader("Loading, please wait...");
        	wait.setBody('<img src="http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif"/>');
        	wait.render(document.body);
		}

        // Show the Panel
        wait.show();
        
        // Connect to our data source and load the data
        var conn = YAHOO.util.Connect.asyncRequest("GET", 
    	        		"ajax_yui_container_modal_loading.php", 
    	        		callback);
	};
	
	var callback = {
         success : function(o) {
         content.innerHTML = o.responseText;
         content.style.visibility = "visible";
         wait.hide();
         },

         failure : function(o) {
	     content.innerHTML = o.responseText;
	     content.style.visibility = "visible";
	     content.innerHTML = "CONNECTION FAILED!";
	     wait.hide();
	     }
	 };
		
	
	return{
    	init: function() {
			
	        YAHOO.util.Event.on("panelbutton", 
	    	        			"click", 
	    	        			clickHandler);
		}
	};
}();

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

</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="container">
<p>
YAHOO.widget.Panelのサンプルです。<br/>
「Show Panel」ボタンで、modal表示になります。
</p>
<button id="panelbutton">Show Panel</button>
<div id="content"></div>

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

以下が、PHPプログラムである。

<?php
/* ajaxサンプル。
	      
		author	; t.odaka
		date	; 2008/11/24
*/


	$data = '通信成功';

	// 3秒待つ ; responseが戻るまでの間、動画gifを出すデモのため。
	sleep(3);
	
	// 出力
	echo($data);

?>