Container Family: Using ContainerEffect Transitions

Ajax Javascript YUI Container

このExampleでは、YAHOO.widget.Overlayオブジェクトの現れ方が、3つのバリエーションで照会されている。
この3つとは

  1. Fade In / Out
  2. Slide In / Out
  3. Slide with Fading In /Out

の3通りである。

いずれも指定した位置に現れるのだが、Slide in/outの場合には、画面の左外から現れ、右外に消えていく、というEffectとなっている。

この３通りの出現方法は、Overlayインスタンスを生成する際に、オブジェクト・リテラルにeffectという属性を記述するだけで実現できる。
これを行うのが、YAHOO.widget.ContainerEffectというオブジェクトである。
このAPIドキュメントを見てみると、Fade、Slide以外には、同様のメソッドはないようであるが、Animationのためのトリガー、ハンドラ類をメソッドとしてもっている。

以下が、3つのOverlayを表示させたときの画面である。
Styleは、「Creating and Positioning an OverlayComments」のサンプルと同じになっている。

大切なのは、同様のMotionが、サブクラスであるPanel, Tooltip, Dialog, SimpleDialogでも行えることである。

以下にJavascriptを含む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/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/animation/animation.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;
}

.yui-overlay { 
	position:absolute;
	border:1px dotted black;
	padding:5px;
	margin:10px;
	background:#fff; 
}
.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; 
}
</style>

<script type="text/javascript">
// モジュールパターンで書く。
YAHOO.namespace("EGP");

YAHOO.EGP.ContainerEffect = function() {

	var Event = YAHOO.util.Event;
	var overlay1,overlay2,overlay3;
	
	return{
		init:function() {
		overlay1 
			= new YAHOO.widget.Overlay("overlay1", 
				{ xy:[300,50],
			  	visible:false,
			 	width:"300px",
				// z-indexを思いっきり大きくとってる。
			 	zIndex:1000,
			 	// 0.25secのdurationで、Fade in/outする。
			  	effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } 
	  	);
	  	// id=exampleは存在しない！！
		overlay1.render("example");

		overlay2 
			= new YAHOO.widget.Overlay("overlay2", 
				{ xy:[300,100],
			  	visible:false,
			  	width:"300px",
			  	zIndex:1000,
			 	// 0.25secのdurationで、Slide in/outする。
			  	effect:{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25} } 
		);
		overlay2.render("example");

		overlay3 = new YAHOO.widget.Overlay("overlay3", 
				{ xy:[300,100],
			  	visible:false,
			  	width:"300px",
			  	zIndex:1000,
			  	effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
					  {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } 
		);
		overlay2.render("example");

		Event.addListener("show1", 
				"click", 
				overlay1.show, 
				overlay1, 
				true);
		Event.addListener("hide1", 
				"click", 
				overlay1.hide, 
				overlay1, 
				true);

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

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

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

</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="main">
<p>
Overlayの現れ方のサンプルです。
</p>
<div>
	overlay1 (fade in):
	<button id="show1">Show</button>
	<button id="hide1">Hide</button>
</div>
<div>
	overlay2 (slide in):
	<button id="show2">Show</button>
	<button id="hide2">Hide</button>
</div>
<div>
	overlay3 (fade and slide):
	<button id="show3">Show</button>
	<button id="hide3">Hide</button>
</div>

<!-- Markupが見えてしまわないようにhiddenにしておく -->
<div id="overlay1" style="visibility:hidden;">
	<div class="hd">ヘッダー；Overlay #1 from Markup</div>
	<div class="bd">ボディー；This is a Overlay that was marked up in the document.</div>
	<div class="ft">フッター；End of Overlay #1</div>
</div>

<div id="overlay2" style="visibility:hidden;">
	<div class="hd">ヘッダー；Overlay #2 from Markup</div>
	<div class="bd">ボディー；This is a Overlay that was marked up in the document.</div>
	<div class="ft">フッター；End of Overlay #2</div>

</div>

<div id="overlay3" style="visibility:hidden;">
	<div class="hd">ヘッダー；Overlay #3 from Markup</div>
	<div class="bd">ボディー；This is a Overlay that was marked up in the document.</div>
	<div class="ft">フッター；End of Overlay #3</div>
</div>

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