Creating and Positioning an Overlay

Ajax Javascript YUI Container

YAHOO.widget.Overlayは、YAHOO.widget.Moduleの子孫である。
また、Menu、Panel、Tooltip、Dialog（DialogはPanelの子孫）といった重要なモジュール群の祖先となっている。
YUIのExampleページには、

Overlay is fundamentally a building block for other UI controls. The concepts presented in this example will form the basis for the way that you interact with all of its subclasses, including Panel and Dialog.（YUIのサイトより引用）
Ovarlayは、UIコントロールの基本ブロック（fundamentalli a building block）となっている。この例は、これからPanelやDialogといったサブクラス（子孫）を扱う上の基本となるだろう。

と書いてある。

また、Overlayは、Moduleを拡張（extends）するものな訳だが、

  1. ページ・フロー（スクロールなどのこと）に関係なく絶対位置を保障すること、といったポジショニングに関する機能
  2. プロパティー値の変更を監視するカスタム・イベント
  3. IEでselectタグを扱うためのiframeのビルドイン

といった機能をもつ。

この基本ブロックとしての機能を与えるという正確ゆえに、デフォルトではスタイルをもたない。

Exampleでは、以下の３つの例が示されている。

  1. ページ・フローに関係なく、画面（viewpoint）の中心に位置するOverlay（Markupから生成される）
  2. [x,y]座標（left-topを表す）を指定しての表示（Javascriptで生成する）
  3. documentにある他のエレメントに対して、ページフローに関係なく相対位置を維持する（Javascriptで生成する）

以下は初期画面。ボタンはshowとhideの組み合わせになっており、それぞれの対が上のサンプルとなっている。

下が3番目の例を表示したときものである。

いうまでもなく、これらの機能は（overrideされることがなければ）Panel、Menuといったオブジェクトに継承される。

以下に、Javascriptを含むHTMLの全文を示す。
この例では、YUIのExampleに注釈を加えるに止め、殆どソースの書き直しは行わなかった（本質的ではないため）。

<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/yahoo-dom-event/yahoo-dom-event.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;
}
.yui-overlay { 
	position:absolute;
	background:#fff;
	border:1px dotted black;
	padding:5px;
	margin:10px; 
}
.yui-overlay .hd { 
	border:1px solid red;
	padding:5px; 
}
.yui-overlay .bd { 
	border:1px solid green;
	padding:5px; 
}
.yui-overlay .ft { 
	border:1px solid blue;
	padding:5px; 
}

#ctx { 
	background:orange;
	width:100px;
	height:25px; 
}

#example {
	height:15em;
}

</style>

<script type="text/javascript">
YAHOO.namespace("example.container");
// ここで実行空間を分割するわけではない。

YAHOO.util.Event.onDOMReady(function () {

	// Markup（id=overlay1）からOverlayインスタンスを生成する。
	// 常に（リサイズやフローしても）画面の中央に表示する。
	// clickで表示するように非表示に設定。
	YAHOO.example.container.overlay1 
			= new YAHOO.widget.Overlay("overlay1", 
										{ fixedcenter:true,
										  visible:false,
										  width:"300px" } );
	// id=overlay1のmarkupがあるので、renderの引数はいらない。
	YAHOO.example.container.overlay1.render();

	// JavascriptでOverlayインスタンスを生成する。
	// left:600, top;200に表示する。
	// clickで表示するように非表示に設定。
	YAHOO.example.container.overlay2 
			= new YAHOO.widget.Overlay("overlay2", 
										{ xy:[600,200],
										  visible:false,
										  width:"300px" } );
	YAHOO.example.container.overlay2.setHeader("Overlay #2 from Script");
	YAHOO.example.container.overlay2.setBody("(dynamic) [600,200]に表示");
	YAHOO.example.container.overlay2.setFooter("End of Overlay #2");
	// id=overlay2のmarkupがないので、document.body下に生成するよう指示。
	YAHOO.example.container.overlay2.render(document.body);

    // JavascriptでOverlayインスタンスを生成する。
	// 常に（リサイズやフローしても）top-leftを「Align to me」のbottom-leftにあわせる。
	// clickで表示するように非表示に設定。
	YAHOO.example.container.overlay3 
		= new YAHOO.widget.Overlay("overlay3", 
									{ context:["ctx","tl","bl", ["beforeShow", "windowResize"]],
									  visible:false,
									  width:"200px" } );
	YAHOO.example.container.overlay3.setHeader("Overlay #3 from Script");
	YAHOO.example.container.overlay3.setBody("(dynamic) top-leftを「Align to me」のbottom-leftにあわせる");
	YAHOO.example.container.overlay3.setFooter("End of Overlay #3");
	YAHOO.example.container.overlay3.render(document.body);

	YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.overlay1.show, 
			YAHOO.example.container.overlay1, true);
	YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.overlay1.hide, 
			YAHOO.example.container.overlay1, true);

	YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.overlay2.show, 
			YAHOO.example.container.overlay2, true);
	YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.overlay2.hide, 
			YAHOO.example.container.overlay2, true);

	YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, 
			YAHOO.example.container.overlay3, true);
	YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, 
			YAHOO.example.container.overlay3, true);
});

</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="container">
<p>
YAHOO.widget.Overlayのサンプルです。
</p>

<div>
	overlay1:
	<button id="show1">Show</button>
	<button id="hide1">Hide</button>
</div>
<div>
	overlay2:
	<button id="show2">Show</button>
	<button id="hide2">Hide</button>
</div>
<div>
	overlay3:
	<button id="show3">Show</button>
	<button id="hide3">Hide</button>
</div>

<div id="ctx">Align to me</div>

<!-- ここで、hiddenにしているのは、遅いマシンでOverlayがかかる前に出ちゃうと困るから。 -->
<div id="overlay1" style="visibility:hidden">
	<div class="hd">Overlay #1 from Markup</div>
	<div class="bd">(markup) これはマークアップから生成（画面の真ん中）</div>
	<div class="ft">End of Overlay #1</div>
</div>

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