Container Family: Simple Panel Example

Ajax Javascript YUI Container Panel Window

このExampleはシンプルなYAHOO.widget.Panelの例。
Panelというよりも、PopupしないWindowといった方がいいかもしれない。
YUIの説明に、「OSのWindowに似た振る舞い」と書かれている。
この意味を正確にいえば、OSという枠の中で発生して制御されるWindowという意味で、このPanelもBrowserの一つのWindowという枠の中で発生して制御される、という意味である。したがって、Browserの新規Windowsや新規タブを起動するという意味ではない。

YAHOO.widget.PanelはYAHOO.widget.Overlayのサブクラスであるが、

  • Modality
  • Drag and Drop
  • Colseボタン
  • Style

といった機能が付加されている。（YAHOO.widget.PanelのAPIドキュメントはこちら）

以下は、サンプルの初期画面。PanelもMarkupからの生成と、Javascriptでの生成が可能で、その2つの例が示されている（panel1が前者、panel2が後者）。

以下が、2つの画面を開いた時の画面である。Panelのボディー部にコンフィグ属性の指定値をtebleで表示するようにした。panel1を動かしてみると、showした順にかかわらずpanel1のZ軸が小さいことがわかる。また、Panelは起動時にそれぞれ１回だけインスタンス化されるので、panel1を閉じると、再度、開いた場合には閉じた位置にWindowが表示される。

以下がJavascriptを含む、HTMLの全文である。
Panelのインスタンス生成時に、constraintoviewportをtrueに設定すると、表示されているWindow内だけにPanelの移動が制限される。これがfalseの場合、Panelの動きにあわせてページがフローする（スクロールなど）ようになる。

<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" />
<!-- Draggableなパネルのため -->
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="scripts/yui/container/container-min.js"></script>

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

</style>

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

// YAHOO.example.containerにSimplePanelを追加する。
YAHOO.example.container.SimplePanel = function() {
	var Event = YAHOO.util.Event;
	var Dom = YAHOO.util.Dom;
	var panel1,panel2;
		
	return{
    	init: function() {

			// id=panel1のMarkupから生成する。
			panel1 = new YAHOO.widget.Panel("panel1", 
					{ 	width:"320px", 
						visible:false, 
						// constraintoviewport:trueとすると、viewpoint内しかドラッグできない。
						// falseとすると、viewpoint外までドラッグできる。Dragによって画面がスクロールする。
						constraintoviewport:true 
					} );
			// id=panel1のMarkupが存在するので、引数は不要。
			panel1.render();

			// Scriptからdynamicに生成して、id=panel2とする。
			panel2 = new YAHOO.widget.Panel("panel2", 
					{ 	width:"320px", 
						visible:false, 
						draggable:false, 
						close:false 
					} );
			panel2.setHeader("Panel #2のheader: このPanelはDraggableではない");
			panel2.setBody("Scriptで生成したPanel<br/>"+
							'<table border="1">'+
							"<tr><td>パラメータ</td><td>値</td></tr>"+ 
							"<tr><td>visible</td><td>false</td></tr>"+ 
							"<tr><td>draggable</td><td>false</td></tr>"+
							"<tr><td>close</td><td>false</td></tr>"+
							"</table>"
							);
			panel2.setFooter("Panel #2のfooter");
			// id=panel1のMarkupが存在しないので、renderingする場所（div）を指定
			// div id=containerにappendされる。
			panel2.render("container");

			// Listnerの設定
			Event.addListener(	
							"show1", 
							"click", 
							panel1.show, 
							panel1, 
							true
						);
			Event.addListener(	
							"hide1", 
							"click", 
							panel1.hide, 
							panel1, 
							true
						);

			Event.addListener(	
							"show2", 
							"click", 
							panel2.show, 
							panel2, 
							true
						);
			Event.addListener(	
							"hide2", 
							"click", 
							panel2.hide, 
							panel2, 
							true
						);
		}
	};
}();

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

</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class="yui-skin-sam">
<div id="main">
<p>
YAHOO.widget.Panelのサンプルです。
</p>
<div id="container">
	<div>
		<button id="show1">Show panel1</button> 
		<button id="hide1">Hide panel1</button>

	</div>
	
	<div id="panel1">
		<!-- classの指定が大事 -->
		<div class="hd">Panel #1 : このPanelはDraggable</div>
		<div class="bd">Markupから生成したPanel<br/>
						<table border="1">
						<tr><td>パラメータ</td><td>値</td></tr> 
						<tr><td>visible</td><td>false</td></tr> 
						<tr><td>constraintoviewport</td><td>true</td></tr>
						</table>
		</div>
		<div class="ft">Panel #1のfooter</div>
	</div>

	
	<div>
		<button id="show2">Show panel2</button> 
		<button id="hide2">Hide panel2</button>
	</div>
</div>

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