Container Family: Skinning a Panel with Custom CSS: Introduction

Ajax Javascript YUI Container Panel Window

このExampleでは、Panelのスキン（見た目、スタイル）の変え方の基本について述べられている。
先のExampleにもあったように、Panelはデフォルトのスキンを持っているが、それを組み入れる画面の色調や雰囲気に合わせてスキンを変える必要がしばしばある。

Exampleでは、Aqua風（Mac OS風）スキンということで、角の取れた枠と、（右上ではなく)左上に、フォーカスが当たると「×」の現れるクローズボタンを配すという変更を加えている。
この変更は、デフォルトのスキンを上書きをするという方法で行われる。

YUIのPanelには、このスタイルを与えるために予約されているclass名が存在する。
これらについては、（添付の）ソースコードを見れば、分かる。

サンプルとしては、（Aqua風のスキンを作るということもあまりないと思うので）ボタンを赤からグレー（、
）に変更してみた。以下が初期画面。

以下がPanelを開いたときの画面である。

以下にJavascriptを含むHTMLの全体を示す。

<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;
}
/* Panelの影 */
#myPanel_c.yui-panel-container.shadow .underlay { 
	position:absolute;
   	left:3px;
	right:-3px;
	top:3px;
	bottom:-3px;
	background-color:#000;
	opacity:0.12;
	filter:alpha(opacity=12);
}
/* Panelの影 */
#myPanel.yui-panel {
	position:relative;
	border:none;
	overflow:visible;
	background-color:transparent;
}

/* 閉じるボタン */
#myPanel.yui-panel .container-close {
	position:absolute;
	top:3px;
	left:4px;
	height:18px;
	width:17px;
	background:url(scripts/yui/container/assets/img/aqua-hd-close.gif) no-repeat; 
}

/* 閉じるボタンのhover */
/* span:hover はIE6ではサポートされていない */
#myPanel.yui-panel .container-close:hover {
	background:url(scripts/yui/container/assets/img/aqua-hd-close-over.gif) no-repeat; 
}

/* Panelヘッダー */
#myPanel.yui-panel .hd { 
	padding:0;
	border:none;
	background:url(scripts/yui/container/assets/img/aqua-hd-bg.gif) repeat-x;
	color:#000;
	height:22px;
	margin-left:6px;
	margin-right:6px;
	text-align:center;
	overflow:visible;
}

/* Panelボディー */
#myPanel.yui-panel .bd {
	overflow:hidden;
	padding:4px;
	border:1px solid #aeaeae;
	background-color:#FFF;
}

/* Panelフッター */
#myPanel.yui-panel .ft {
	font-size:75%;
	color:#666;
	padding:2px;
	overflow:hidden;
	border:1px solid #aeaeae;
	border-top:none;
	background-color:#dfdfdf;
}

/* Provide skin for custom elements */
/* ヘッダーテキスト */
#myPanel.yui-panel .hd span {
	vertical-align:middle;
	line-height:22px;
	font-weight:bold;
}

/* Panelヘッダー （top-leftのイメージ）*/
#myPanel.yui-panel .hd .tl {
	width:7px;
	height:22px;
	top:0;
	left:0px;
	background:url(scripts/yui/container/assets/img/aqua-hd-lt.gif) no-repeat;
	position:absolute;
}

/* Panelヘッダー （top-rightのイメージ）*/
#myPanel.yui-panel .hd .tr {
	width:7px;
	height:22px;
	top:0;
	right:0px;
	background:url(scripts/yui/container/assets/img/aqua-hd-rt.gif) no-repeat;
	position:absolute;
}
</style>

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

//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(function () {
		YAHOO.example.container.myPanel 
		= new YAHOO.widget.Panel("myPanel", { 
			width:"300px", 
			visible:false, 
			constraintoviewport:true, 
			draggable:true 
		});
		YAHOO.example.container.myPanel.render();
	}
);

</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class="yui-skin-sam">
<div id="main">
<p>
YAHOO.widget.Panelのサンプルです。
</p>
	<div id="myPanel">
		<div class="hd"><div class="tl"></div><span>ヘッダー；Panel from Markup</span><div class="tr"></div></div>
		<div id="bd" class="bd">ボディー；このパネルはMarkupから作られています。</div>
		<div class="ft">フッター；End of Panel</div>
	</div>

	<div>
		<button onclick="YAHOO.example.container.myPanel.show()">Show panel</button>

		<button onclick="YAHOO.example.container.myPanel.hide()">Hide panel</button>
	</div>
</div>
</BODY>
</HTML>