YAHOO.widget.Panel


(YUI version 2.2.2)

パネルを作成する

説明
Object = new YAHOO.widget.Panel("String", {JSON形式パラメータ});

パネルのオブジェクトを生成します。

このオブジェクトはパネルを使用するための、パネル名をオブジェクトして返します。
パネルの概念的説明として、HTML、PhotoShopなどに使われるレイヤー的位置づけと認識しております。
パネル上に動的なオブジェクトを配置することによって、ドラッグ&ドロップ、フェード効果、アニメーション等の動作が発生します。
アクションを常に監視するためにリスナーも組み合わせて、イベント処理を行います。

パネルには、以下のパラメータが用意されています
パラメータ名 型 規定値 詳細
closeBooleantrue閉じるボタンを表示するかを設定する
draggableBooleantrueドラッグを許可するか設定する
underlayString"shadow""shadow" パネルに影を付けます。
"matte" つや消しを行います。
"none" なにも行いません。
modalBooleanfalseモーダルダイアログを有効にするかを設定する。
有効にした場合は、背景はグレーになり表示されてるパネルしか触れなくなる
keylistenersArraynullキーリスナーの配列で設定する


サンプルを実行 ソースをダウンロード
例１. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="event.js" ></script>
<script type="text/javascript" src="dom.js" ></script>
<script type="text/javascript" src="dragdrop.js" ></script>
<script type="text/javascript" src="container.js"></script>
<link type="text/css" rel="stylesheet" href="container.css">
<script type="text/javascript">
	YAHOO.namespace("login.container");
	window.onload = function() {
	YAHOO.login.container.panel1 = new YAHOO.widget.Panel("panel1", 
		{ 
			width:"500px", 
			visible:false, 
			constraintoviewport:true
		}
	 );
	YAHOO.login.container.panel1.render();
	YAHOO.util.Event.addListener(
		"show1", 
		"click", 
		YAHOO.login.container.panel1.show,
		YAHOO.login.container.panel1,
		true
	);
}
</script>
</head>
<body>
<div>
<button id="show1">Show panel1</button>
</div>
<div id="panel1">
<div class="hd">
	<div class="tl"></div>
	<span>ログイン画面</span>
		<div class="tr"></div>
	</div>
<div class="bd">
<table>
	<tr><td><br>id :</td><td><br><br>
		<input type="text" name="id" value="" size=50><br><br></td>
	</tr>
	<tr>
		<td>password :</td>
		<td><input type="text" name="password" 
			value="" size=50><br></td>
	</tr>
	<tr><td colspan=2>
		<div align="center"><br><br>    
			<input type="button" name="ok" 
			value="      確定      " 
			onclick="location.href = 'yui_panel_20080808.html';">
		</div>
</td></tr>
</table>
</div>
<div class="ft">
	<div class="bl"></div>
		<span>確定を押したら前の画面に飛びます</span>
	<div class="br"></div>
</div>
</div>
</body>
</html>


書籍
AJAXを使うのに、１つは欲しい書籍として、Ajaxハッカーズ・プログラミングの本がお勧めです。
結構前の出版物で、古書しかないかもしれませんが、AJAXの基本が詳しく丁寧に図解入りで
解説されています。

サンプルCDも付いてますので、ソースをコピーして自分なりに変えるだけでもとても勉強になります。
沢山のAJAX本が続々と出てる中で、この本は、いつまでも、良質のものといえると思います。

自分も、この本でAJAXを覚えました。
最近は便利なライブラリが沢山出ていて、コピペすれば動くものが多いですが、それでも
この本を読んでおけば、改造度の幅がかなり広がると思います。

関連商品