132 lines
No EOL
8.1 KiB
HTML
132 lines
No EOL
8.1 KiB
HTML
<!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">
|
|
<title>YUI Container - Panel: Advanced Skinning using CSS (YUI Library)</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
|
|
<link type="text/css" rel="stylesheet" href="../assets/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="doc3" class="yui-t5">
|
|
<div id="hd">
|
|
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
|
|
<h1>YUI Container: Panel: Advanced Skinning using CSS</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
|
|
|
|
<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
|
|
<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
|
|
<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
|
|
<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
|
|
<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
|
|
<li class="item selected"><a href="1.html">Panel: Advanced Skinning using CSS</a></li>
|
|
<li class="child active"><a href="1.html">Skinning the Panel</a></li>
|
|
<li class="child"><a href="2.html">Functional Example</a></li>
|
|
<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
|
|
<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
|
|
<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
|
|
<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
|
|
<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
|
|
<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
|
|
<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
|
|
<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<h1 class="first">Skinning the Panel</h1>
|
|
|
|
<p>Panels can be skinned using only CSS, and a bit of extra markup. In this tutorial, we will create two Panels — one skinned to look like a Windows XP window, and one that looks like the Mac OS X Aqua style. First, let's look at the markup structure that will serve as the framework for our newly skinned Panels. You'll notice that a few additional elements have been added to the header and footer. The classes of these elements — "tl", "tr", "br" and "bl" — represent each of the corner images that will be applied to the XP skin. The Aqua skin will be built from script (not based on existing markup) using the same structure, although the rounded corners will only be applied to the top corners. The script and markup for the two skinned Panels are listed below: </p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
YAHOO.example.container.panel2.setHeader("<div class='tl'></div><span>Panel #2 from Script</span><div class='tr'></div>");
|
|
YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
|
|
YAHOO.example.container.panel2.setFooter("<span>End of Panel #2</span>");
|
|
</textarea>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<div id="panel1">
|
|
<div class="hd"><div class="tl"></div><span>Panel #1 from Markup</span><div class="tr"></div></div>
|
|
<div class="bd">This is a Panel that was marked up in the document.</div>
|
|
<div class="ft"><div class="bl"></div><span>End of Panel #1</span><div class="br"></div></div>
|
|
</div>
|
|
</textarea>
|
|
|
|
<p>The skinning of these Panels is achieved using CSS definitions. In this tutorial, we will use id selectors in our CSS definitions to specify which Panel should receive each skin. Most of the styles consist of background images that are applied to various pieces of the Panels. The styles are defined below:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
/* XP Panel Skin CSS */
|
|
#panel1_c.panel-container.shadow .underlay { background-color:#999; }
|
|
|
|
/* Apply the border to the right side */
|
|
#panel1.panel { border:none; overflow:visible; background:transparent url(../assets/img/xp-brdr-rt.gif) no-repeat top right; }
|
|
|
|
/* Style the close icon */
|
|
#panel1.panel .close { top:5px; right:8px; height:21px; width:21px; }
|
|
#panel1.panel .close.nonsecure { background-image:url(../assets/img/xp-close.gif); }
|
|
#panel1.panel .close.secure { background-image:url(../assets/img/xp-close.gif); }
|
|
|
|
/* Style the header with its associated corners */
|
|
#panel1.panel .hd { padding:0; border:none; background:transparent url(../assets/img/xp-hd.gif); color:#FFF; height:30px; margin-left:8px; margin-right:8px; text-align:left; vertical-align:middle; overflow:visible; }
|
|
#panel1.panel .hd span { line-height:30px; vertical-align:middle; }
|
|
#panel1.panel .hd .tl { width:8px;height:29px; top:1px;left:0; background:transparent url(../assets/img/xp-tl.gif); position:absolute; }
|
|
#panel1.panel .hd .tr { width:8px;height:29px; top:1px;right:0; background:transparent url(../assets/img/xp-tr.gif); position:absolute; }
|
|
|
|
/* Style the body with the left border */
|
|
#panel1.panel .bd { overflow:hidden; padding:10px; border:none; background:#FFF url(../assets/img/xp-brdr-lt.gif) repeat-y; margin:0 4px 0 0; }
|
|
|
|
/* Style the footer with the bottom corner images */
|
|
#panel1.panel .ft { background:transparent url(../assets/img/xp-ft.gif); font-size:11px; height:26px; padding:0px 10px; }
|
|
#panel1.panel .ft span { line-height:22px; vertical-align:middle; }
|
|
#panel1.panel .ft .bl { width:8px;height:26px; bottom:0;left:0; background:transparent url(../assets/img/xp-bl.gif); position:absolute; }
|
|
#panel1.panel .ft .br { width:8px;height:26px; bottom:0;right:0; background:transparent url(../assets/img/xp-br.gif); position:absolute; }
|
|
|
|
/* Aqua Panel Skin CSS */
|
|
#panel2_c.panel-container.shadow .underlay { background-color:#999; }
|
|
#panel2.panel { border:none; overflow:visible; background-color:transparent; }
|
|
|
|
/* Apply styles to the close icon to anchor it to the left side of the header */
|
|
#panel2.panel .close { top:3px; left:4px; height:18px; width:17px; }
|
|
#panel2.panel .close.nonsecure { background-image:url(../assets/img/aqua-hd-close.gif); }
|
|
#panel2.panel .close.secure { background-image:url(../assets/img/aqua-hd-close.gif); }
|
|
#panel2.panel .close.nonsecure:hover { background-image:url(../assets/img/aqua-hd-close-over.gif); }
|
|
#panel2.panel .close.secure:hover { background-image:url(../assets/img/aqua-hd-close-over.gif); }
|
|
|
|
/* Style the header and apply the rounded corners, center the text */
|
|
#panel2.panel .hd { padding:0; border:none; background:transparent url(../assets/img/aqua-hd-bg.gif); color:#000; height:22px; margin-left:7px; margin-right:7px; text-align:center; overflow:visible; }
|
|
#panel2.panel .hd span { vertical-align:middle; line-height:22px; }
|
|
#panel2.panel .hd .tl { width:7px; height:22px; top:0; left:0; background:transparent url(../assets/img/aqua-hd-lt.gif); position:absolute; }
|
|
#panel2.panel .hd .tr { width:7px; height:22px; top:0; right:0; background:transparent url(../assets/img/aqua-hd-rt.gif); position:absolute; }
|
|
|
|
/* Style the body and footer */
|
|
#panel2.panel .bd { overflow:hidden; padding:4px; border:1px solid #aeaeae; background-color:#FFF; }
|
|
#panel2.panel .ft { font-size:75%; color:#666; padding:2px; overflow:hidden; border:1px solid #aeaeae; border-top:none; background-color:#dfdfdf; }
|
|
</textarea>
|
|
|
|
<div id="stepnav">
|
|
<a class="next" href="2.html">Continue to <em>Functional Example</em> ></a> </div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="ft"> </div>
|
|
</div>
|
|
|
|
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |