Container Family: Skinning a Panel with Custom CSS: Advanced
このExampleは、Advanscedと書かれているが、スタイルの知識があれば、先の「Container Family: Skinning a Panel with Custom CSS: Introduction」と殆ど変わらぬ内容のExample。
このExampleでは、HTMLに読み込むCSSファイルを
container/assets/container-core.css
というコアのみを含むものに変更して、パネルのスタイリングを一から行うことのサンプルを示している。
Panel１はWindows XP風のPanel（Window）を表示する。これは、マークアップから生成している。
（下の図）
Panel2はMacOS風のPanel（Window）を表示する。これは、scriptで生成している。
（下の図；閉じるボタンは、先の例と同様にグレイのものを使用した）
以下に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/container-core.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; } /* XP Panel (id=panel1) */ /* デフォルトの設定 */ /* パネルの影 */ #panel1_c.yui-panel-container.shadow .underlay { left:3px; right:-3px; top:3px; bottom:-3px; position:absolute; background-color:#000; opacity:0.12; filter:alpha(opacity=12); } /* Apply the border to the right side */ /* パネル */ #panel1.yui-panel { position:relative; border:none; overflow:visible; background:transparent url(scripts/yui/container/assets/img/xp-brdr-rt.gif) no-repeat top right; } /* Style the close icon */ /* 閉じるボタン */ #panel1.yui-panel .container-close { position:absolute; top:5px; right:8px; height:21px; width:21px; background:url(scripts/yui/container/assets/img/xp-close.gif) no-repeat; } /* Style the header with its associated corners */ /* ヘッダー全体の設定 */ #panel1.yui-panel .hd { padding:0; border:none; background:url(scripts/yui/container/assets/img/xp-hd.gif) repeat-x; color:#FFF; height:30px; margin-left:8px; margin-right:8px; text-align:left; vertical-align:middle; overflow:visible; } /* Style the body with the left border */ /* ボディー全体の設定 */ #panel1.yui-panel .bd { overflow:hidden; padding:10px; border:none; background:#FFF url(scripts/yui/container/assets/img/xp-brdr-lt.gif) repeat-y; margin:0 4px 0 0; } /* Style the footer with the bottom corner images */ /* フッター全体の設定 */ #panel1.yui-panel .ft { background:url(scripts/yui/container/assets/img/xp-ft.gif) repeat-x; font-size:11px; height:26px; padding:0px 10px; border:none } /* Skin custom elements */ /* ヘッダーの文字をセンタリング＆ボールドに設定 */ #panel1.yui-panel .hd span { line-height:30px; vertical-align:middle; font-weight:bold; } /* ヘッダーの左上（top-left）の画像を設定 */ #panel1.yui-panel .hd .tl { width:8px; height:29px; top:1px; left:0; background:url(scripts/yui/container/assets/img/xp-tl.gif) no-repeat; position:absolute; } /* ヘッダーの右上（top-right）の画像を設定 */ #panel1.yui-panel .hd .tr { width:8px; height:29px; top:1px; right:0; background:url(scripts/yui/container/assets/img/xp-tr.gif) no-repeat; position:absolute; } /* フッターの文字をセンタリング */ #panel1.yui-panel .ft span { line-height:22px; vertical-align:middle; } /* フッターの左下（bottom-left）の画像を設定 */ #panel1.yui-panel .ft .bl { width:8px; height:26px; bottom:0; left:0; background:url(scripts/yui/container/assets/img/xp-bl.gif) no-repeat; position:absolute; } /* フッターの左下（bottom-right）の画像を設定 */ #panel1.yui-panel .ft .br { width:8px; height:26px; bottom:0; right:0; background:url(scripts/yui/container/assets/img/xp-br.gif) no-repeat; position:absolute; } /* Aqua Panel (id=panel2) */ /* デフォルトの設定 */ /* パネルの影 */ #panel2_c.yui-panel-container.shadow .underlay { position:absolute; background-color:#000; opacity:0.12; filter:alpha(opacity=12); left:3px; right:-3px; bottom:-3px; top:3px; } /* パネル */ #panel2.yui-panel { position:relative; border:none; overflow:visible; background-color:transparent; } /* Apply styles to the close icon to anchor it to the left side of the header */ /* 閉じるIconをヘッダー部の左端におく */ #panel2.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; } /* span:hover not supported on IE6 */ /* 閉じるIconをHoverで変える（IE6では未サポート） */ #panel2.yui-panel .container-close:hover { background:url(scripts/yui/container/assets/img/aqua-hd-close-over.gif) no-repeat; } /* Style the header and apply the rounded corners, center the text */ /* 丸い角でテキストをセンターにおくヘッダーを設定 */ #panel2.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:7px; margin-right:7px; text-align:center; overflow:visible; } /* Style the body and footer */ /* ボディー部の設定 */ #panel2.yui-panel .bd { overflow:hidden; padding:4px; border:1px solid #aeaeae; background-color:#FFF; } #panel2.yui-panel .ft { /* フッター部の設定 */ font-size:75%; color:#666; padding:2px; overflow:hidden; border:1px solid #aeaeae; border-top:none; background-color:#dfdfdf; } /* Skin custom elements */ /* ヘッダー部の文字をセンタリングする*/ #panel2.yui-panel .hd span { vertical-align:middle; line-height:22px; font-weight:bold; } /* ヘッダー部の左上（top-left）を丸くする */ #panel2.yui-panel .hd .tl { width:7px; height:22px; top:0; left:0; background:url(scripts/yui/container/assets/img/aqua-hd-lt.gif) no-repeat; position:absolute; } /* ヘッダー部の右上（top-right）を丸くする */ #panel2.yui-panel .hd .tr { width:7px; height:22px; top:0; right:0; background:url(scripts/yui/container/assets/img/aqua-hd-rt.gif) no-repeat; position:absolute; } </style> <script type="text/javascript"> YAHOO.namespace("example.container"); YAHOO.util.Event.onDOMReady(function () { // Panel1はMarkupから生成 YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } ); YAHOO.example.container.panel1.render(); // Panel2はScriptから生成 YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, constraintoviewport:true } ); // <div class='tl'></div><span>...に注意。 YAHOO.example.container.panel2.setHeader ("<div class='tl'></div><span>ヘッダー；Panel #2 はScriptから生成</span><div class='tr'></div>"); YAHOO.example.container.panel2.setBody ("ボディー；これはScriptで生成されたパネルです"); YAHOO.example.container.panel2.setFooter ("<span>フッター；End of Panel #2</span>"); YAHOO.example.container.panel2.render("container"); YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true); YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true); YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true); YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true); }); </script> </HEAD> <BODY> <div id="main"> <p> YAHOO.widget.Panelのサンプルです。 </p> <div id="container"></div> <div> <button id="show1">Show panel1</button> <button id="hide1">Hide panel1</button> </div> <div id="panel1"> <div class="hd"><div class="tl"></div><span>ヘッダー；Panel #1 はMarkupから生成</span><div class="tr"></div></div> <div class="bd">ボディー；これは、Marlup内に記述された文です。</div> <div class="ft"><div class="bl"></div><span>フッター；End of Panel #1</span><div class="br"></div></div> </div> <div> <button id="show2">Show panel2</button> <button id="hide2">Hide panel2</button> </div> </div> </BODY> </HTML>
