comt: src/cm/media/js/lib/yui/yui3.0.0/examples/overlay/overlay-stdmod.html@a84519031134 (annotated)

0 40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	1
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	3	<html>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	4	<head>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	5	<title>YUI Library Examples: Overlay: Standard Module Support</title>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	6	<meta http-equiv="content-type" content="text/html; charset=utf-8">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	7	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	8
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	9	<style>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	10	/Supplemental CSS for the YUI distribution/
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	11	#custom-doc { width: 95%; min-width: 950px; }
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	12	#pagetitle {background-image: url(../../assets/bg_hd.gif);}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	13	/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	14	</style>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	15
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	16	<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	17	<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	18	<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	19	<style type="text/css">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	20	/* Overlay Look/Feel */
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	21	.yui-overlay-content {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	22	padding:3px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	23	border:1px solid #000;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	24	background-color:#aaa;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	25	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	26
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	27	.yui-overlay-content .yui-widget-hd {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	28	padding:5px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	29	border:2px solid #aa0000;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	30	background-color:#fff;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	31	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	32
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	33	.yui-overlay-content .yui-widget-bd {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	34	padding:5px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	35	border:2px solid #0000aa;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	36	background-color:#fff;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	37	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	38
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	39	.yui-overlay-content .yui-widget-ft {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	40	padding:5px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	41	border:2px solid #00aa00;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	42	background-color:#fff;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	43	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	44
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	45	/* Example Layout CSS */
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	46	.overlay-example {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	47	border:1px solid #000;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	48	background-color:#eee;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	49	padding:5px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	50	zoom:1;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	51	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	52
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	53	.overlay-example .fields {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	54	float:left;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	55	width:20em;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	56	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	57
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	58	.overlay-example label {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	59	display:block;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	60	font-weight:bold;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	61	margin-bottom:3px
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	62	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	63
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	64	.overlay-example select {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	65	width:19em;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	66	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	67
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	68	.overlay-example textarea {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	69	width:19em;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	70	height:15em;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	71	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	72
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	73	.overlay-example .filler {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	74	margin-left:21em;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	75	margin-top:1em;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	76	color:#999;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	77	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	78
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	79	.overlay-example:after {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	80	content:".";
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	81	display:block;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	82	height:0;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	83	clear:both;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	84	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	85	</style>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	86	</head>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	87	<body id="yahoo-com" class=" yui-skin-sam">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	88	<div id="custom-doc" class="yui-t2">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	89	<div id="hd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	90	<div id="ygunav">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	91	<p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	92	<em>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	93	<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	94	</em>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	95	</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	96	<form action="http://search.yahoo.com/search" id="sitesearchform">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	97	<input name="vs" type="hidden" value="developer.yahoo.com">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	98	<input name="vs" type="hidden" value="yuiblog.com">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	99	<div id="sitesearch">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	100	<label for="searchinput">Site Search (YDN & YUIBlog): </label>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	101	<input type="text" id="searchinput" name="p">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	102	<input type="submit" value="Search" id="searchsubmit" class="ygbt">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	103	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	104	</form>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	105	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	106	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	107	<div id="pagetitle"><h1>YUI Library Examples: Overlay: Standard Module Support</h1></div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	108	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	109	<div id="bd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	110
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	111
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	112	<div id="yui-main">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	113	<div class="yui-b">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	114	<div class="yui-ge">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	115	<div class="yui-u first example" id="main">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	116
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	117	<h2>Overlay: Standard Module Support</h2>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	118
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	119	<div id="example" class="promo">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	120	<div class="example-intro">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	121	<p>This example shows how you can work either the <code>headerContent, bodyContent, footerContent</code> attributes, to replace content in the Overlay's standard module sections, or use the <code>setStdModContent(section, content, where)</code> method to insert content <em>before</em>, or append it <em>after</em> existing content in the section.</p> </div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	122
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	123	<div class="module example-container ">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	124	<div class="hd exampleHd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	125	<p class="newWindowButton yui-skin-sam">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	126	<a href="overlay-stdmod_clean.html" target="_blank">View example in new window.</a>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	127	</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	128	</div> <div id="example-canvas" class="bd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	129
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	130
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	131	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	132
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	133	<div class="overlay-example" id="overlay-stdmod">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	134	<div id="overlay">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	135	<div class="yui-widget-hd">Overlay Header</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	136	<div class="yui-widget-bd">Overlay Body</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	137	<div class="yui-widget-ft">Overlay Footer</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	138	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	139
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	140	<div class="fields">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	141	<p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	142	<label for="content">New content:</label>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	143	<textarea name="content" id="content"></textarea>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	144	</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	145	<p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	146	<label for="section">Section to add content to:</label>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	147	<select name="section" id="section">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	148	<option value="header">Header</option>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	149	<option value="body">Body</option>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	150	<option value="footer">Footer</option>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	151	</select>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	152	</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	153	<p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	154	<label for="where">Replace, insert before or append after existing content:</label>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	155	<select name="where" id="where">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	156	<option value="before">Before</option>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	157	<option value="after">After</option>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	158	<option value="replace">Replace</option>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	159	</select>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	160	</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	161	<p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	162	<label>Set new content as a string: <input type="checkbox" name="asString" id="asString" checked="true"></label>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	163	</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	164	<button type="button" id="setContent">Set Content</button>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	165	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	166	<div class="filler">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	167	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tellus pede, aliquet vitae, faucibus quis, lobortis non, metus. Pellentesque at metus ac mi condimentum egestas. In vel neque a massa porttitor ultrices. Nunc lorem. Vivamus ullamcorper fringilla tortor. Etiam at nunc pellentesque lectus cursus pretium. Integer velit. In quis nunc eget leo rhoncus scelerisque. In in ante ac ante pharetra vestibulum. Praesent sit amet metus. Nam egestas ipsum. Nulla facilisi. Quisque rhoncus, eros sed convallis faucibus, erat felis pretium nisi, non bibendum magna mauris non metus. Integer mauris eros, volutpat non, pretium vitae, rutrum at, tellus.
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	168	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	169	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	170
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	171	<script type="text/javascript">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	172	YUI({base:"../../build/", timeout: 10000}).use("overlay", function(Y) {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	173
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	174	var overlay = new Y.Overlay({
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	175	contentBox:"#overlay",
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	176	width:"20em",
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	177	align: {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	178	node:"#overlay-stdmod > .filler",
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	179	points:["tl", "tl"]
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	180	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	181	});
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	182	overlay.render();
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	183
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	184	var content = Y.one("#content");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	185	var where = Y.one("#where");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	186	var section = Y.one("#section");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	187	var asString = Y.one("#asString");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	188
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	189	Y.on("click", function() {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	190	var newContent = content.get("value");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	191	if (! asString.get("checked") ) {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	192	// Set new content using Node references
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	193	newContent = Y.Node.create(newContent);
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	194	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	195	overlay.setStdModContent(section.get("value"), newContent, where.get("value"));
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	196	}, "#setContent");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	197	});
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	198	</script>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	199
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	200	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	201
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	202
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	203	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	204	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	205	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	206
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	207	<h3>Overlay's Standard Module Support</h3>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	208
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	209	<h4>Setting Up The YUI Instance</h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	210
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	211	<p>To create an instance of an Overlay on you page, the only module you need to request is the <code>overlay</code> module. The <code>overlay</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-ext</code> and <code>widget-stdmod</code> dependencies it has.</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	212
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	213	<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// We'll write example code here, where we have a Y.Overlay class available.</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	214	<span class="co1">// We'll write example code here, where we have a Y.Overlay class available.</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	215	<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">YUI({...}).use("overlay", function(Y) {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	216	// We'll write example code here, where we have a Y.Overlay class available.
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	217	});</textarea></div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	218	<p>Note, using the <code>overlay</code> module, will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	219
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	220	<h4>Creating The Overlay From Markup</h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	221
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	222	<p>For this example, we'll create the overlay instance from markup which already exists on the page, and is shown below:</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	223
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	224	<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"overlay"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-hd"</span>></span>Overlay Header<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-bd"</span>></span>Overlay Body<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-ft"</span>></span>Overlay Footer<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"overlay"</span>></span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	225	<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-hd"</span>></span>Overlay Header<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	226	<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-bd"</span>></span>Overlay Body<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	227	<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-widget-ft"</span>></span>Overlay Footer<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	228	<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax2-plain"><div id="overlay">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	229	<div class="yui-widget-hd">Overlay Header</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	230	<div class="yui-widget-bd">Overlay Body</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	231	<div class="yui-widget-ft">Overlay Footer</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	232	</div></textarea></div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	233	<h4>Instantiating The Overlay</h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	234
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	235	<p>To create an overlay instance, we use the overlay constructor <code>Y.Overlay</code>, and pass it the <code>contentBox</code> node reference for the existing markup on the page:</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	236
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	237	<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> contentBox<span class="sy0">:</span><span class="st0">"#overlay"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span><span class="st0">"20em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> align<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> node<span class="sy0">:</span><span class="st0">"#overlay-stdmod > .filler"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"tl"</span><span class="sy0">,</span> <span class="st0">"tl"</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	238	contentBox<span class="sy0">:</span><span class="st0">"#overlay"</span><span class="sy0">,</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	239	width<span class="sy0">:</span><span class="st0">"20em"</span><span class="sy0">,</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	240	align<span class="sy0">:</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	241	node<span class="sy0">:</span><span class="st0">"#overlay-stdmod > .filler"</span><span class="sy0">,</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	242	points<span class="sy0">:</span><span class="br0">[</span><span class="st0">"tl"</span><span class="sy0">,</span> <span class="st0">"tl"</span><span class="br0">]</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	243	<span class="br0">}</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	244	<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	245	overlay.<span class="me1">render</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">var overlay = new Y.Overlay({
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	246	contentBox:"#overlay",
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	247	width:"20em",
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	248	align: {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	249	node:"#overlay-stdmod > .filler",
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	250	points:["tl", "tl"]
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	251	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	252	});
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	253	overlay.render();</textarea></div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	254	<p>We also set it's width and align it to the filler paragraph in the example box ("#overlay-stdmod > .filler"). We don't pass any node references to the <code>render</code> method, so the Overlay is rendered in the location of the contentBox provided.</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	255
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	256	<h4>Setting Content</h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	257
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	258	<p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	259	The example provides a set of input fields, allowing the user to set content in either of the 3 standard module sections which Overlay supports using Overlay's <code>setStdModContent</code> method.
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	260	The content can either be inserted before, appended after, or replace existing content in the specified section.</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	261
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	262	<p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	263	Additionally the new content can be converted to a node instance before being added to the specified section. Although it has no impact on the example, if the new content is added as a string, innerHTML is used to insert before or append after the existing section content, removing any event listeners which may have been attached to elements inside the section. The ability to convert the content to a node instance is provided in the example to illustrate Overlay's ability to handle both content formats.
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	264	</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	265
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	266	<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Hold onto input field references.</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> content <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#content"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> where <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#where"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> section <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#section"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="kw2">var</span> asString <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#asString"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// New content to be added.</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> newContent <span class="sy0">=</span> content.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// If the "Set content as string" checkbox is checked, we pass new content into the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// setStdModContent method as string (innerHTML will be used to set the new content).</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// If it's not checked, we create a node reference from the string,</span></div></li><li class="li1"><div class="de1"> <span class="co1">// and pass the new content into the setStdModContent as a node reference.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span> asString.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span> <span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> newContent <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>newContent<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> overlay.<span class="me1">setStdModContent</span><span class="br0">(</span>section.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">,</span> newContent<span class="sy0">,</span> where.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#setContent"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Hold onto input field references.</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	267	<span class="kw2">var</span> content <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#content"</span><span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	268	<span class="kw2">var</span> where <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#where"</span><span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	269	<span class="kw2">var</span> section <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#section"</span><span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	270	<span class="kw2">var</span> asString <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#asString"</span><span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	271
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	272	Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	273
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	274	<span class="co1">// New content to be added.</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	275	<span class="kw2">var</span> newContent <span class="sy0">=</span> content.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	276
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	277	<span class="co1">// If the "Set content as string" checkbox is checked, we pass new content into the </span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	278	<span class="co1">// setStdModContent method as string (innerHTML will be used to set the new content).</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	279
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	280	<span class="co1">// If it's not checked, we create a node reference from the string,</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	281	<span class="co1">// and pass the new content into the setStdModContent as a node reference.</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	282
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	283	<span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span> asString.<span class="me1">get</span><span class="br0">(</span><span class="st0">"checked"</span><span class="br0">)</span> <span class="br0">)</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	284	newContent <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>newContent<span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	285	<span class="br0">}</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	286
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	287	overlay.<span class="me1">setStdModContent</span><span class="br0">(</span>section.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">,</span> newContent<span class="sy0">,</span> where.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	288
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	289	<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#setContent"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">// Hold onto input field references.
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	290	var content = Y.one("#content");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	291	var where = Y.one("#where");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	292	var section = Y.one("#section");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	293	var asString = Y.one("#asString");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	294
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	295	Y.on("click", function() {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	296
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	297	// New content to be added.
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	298	var newContent = content.get("value");
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	299
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	300	// If the "Set content as string" checkbox is checked, we pass new content into the
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	301	// setStdModContent method as string (innerHTML will be used to set the new content).
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	302
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	303	// If it's not checked, we create a node reference from the string,
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	304	// and pass the new content into the setStdModContent as a node reference.
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	305
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	306	if (! asString.get("checked") ) {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	307	newContent = Y.Node.create(newContent);
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	308	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	309
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	310	overlay.setStdModContent(section.get("value"), newContent, where.get("value"));
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	311
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	312	}, "#setContent");</textarea></div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	313	<h4>CSS: Overlay Look/Feel</h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	314
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	315	<p>As with the other basic overlay examples, the overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	316
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	317	<p>The example provides it's own look and feel for the Overlay, by defining rules for the content box, header, body and footer sections:</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	318
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	319	<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Overlay Look/Feel /</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui-overlay-content</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">3px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#aa0000</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-bd</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#0000aa</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-ft</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#00aa00</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/ Overlay Look/Feel */</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	320	<span class="re1">.yui-overlay-content</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	321	<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">3px</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	322	<span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	323	<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	324	<span class="br0">}</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	325
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	326	<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-hd</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	327	<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	328	<span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#aa0000</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	329	<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	330	<span class="br0">}</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	331
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	332	<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-bd</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	333	<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	334	<span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#0000aa</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	335	<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	336	<span class="br0">}</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	337
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	338	<span class="re1">.yui-overlay-content</span> <span class="re1">.yui-widget-ft</span> <span class="br0">{</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	339	<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	340	<span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#00aa00</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	341	<span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	342	<span class="br0">}</span></pre></div><textarea id="syntax5-plain">/* Overlay Look/Feel */
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	343	.yui-overlay-content {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	344	padding:3px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	345	border:1px solid #000;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	346	background-color:#aaa;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	347	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	348
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	349	.yui-overlay-content .yui-widget-hd {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	350	padding:5px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	351	border:2px solid #aa0000;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	352	background-color:#fff;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	353	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	354
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	355	.yui-overlay-content .yui-widget-bd {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	356	padding:5px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	357	border:2px solid #0000aa;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	358	background-color:#fff;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	359	}
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	360
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	361	.yui-overlay-content .yui-widget-ft {
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	362	padding:5px;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	363	border:2px solid #00aa00;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	364	background-color:#fff;
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	365	}</textarea></div> </div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	366	<div class="yui-u sidebar">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	367
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	368
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	369	<div id="examples" class="mod box4">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	370	<div class="hd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	371	<h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	372	Overlay Examples:</h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	373	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	374	<div class="bd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	375	<ul>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	376	<li><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li><a href='../overlay/overlay-align.html'>Extended XY Positioning</a></li><li><a href='../overlay/overlay-stack.html'>Stack Support</a></li><li class='selected'><a href='../overlay/overlay-stdmod.html'>Standard Module Support</a></li><li><a href='../overlay/overlay-io-plugin.html'>IO Plugin</a></li><li><a href='../overlay/overlay-anim-plugin.html'>Animation Plugin</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly (included with examples for StyleSheet)</a></li> </ul>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	377	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	378	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	379
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	380	<div class="mod box4">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	381	<div class="hd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	382	<h4>More Overlay Resources:</h4>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	383	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	384	<div class="bd">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	385	<ul>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	386	<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> -->
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	387	<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	388	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	389	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	390	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	391	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	392
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	393	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	394	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	395
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	396
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	397	<div class="yui-b toc3" id="tocWrapper">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	398	<!-- TABLE OF CONTENTS -->
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	399	<div id="toc">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	400
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	401	<ul>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	402	<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="selected "><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	403	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	404	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	405	</div><!--closes bd-->
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	406
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	407	<div id="ft">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	408	<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	409	<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	410	<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	411	<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	412	<a href="http://careers.yahoo.com/">Job Openings</a></p>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	413	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	414	</div>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	415	<script language="javascript">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	416	var yuiConfig = {base:"../../build/", timeout: 10000};
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	417	</script>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	418	<script src="../../assets/syntax.js"></script>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	419	<script src="../../assets/dpSyntaxHighlighter.js"></script>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	420	<script language="javascript">
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	421	dp.SyntaxHighlighter.HighlightAll('code');
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	422	</script>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	423	</body>
40c8f766c9b8 import from internal svn r 4007 raph parents: diff changeset	424	</html>

author	Yves-Marie Haussonne <ymh.work+github@gmail.com>
	Fri, 09 May 2014 18:35:26 +0200
changeset 656	a84519031134
parent 0	40c8f766c9b8
permissions	-rw-r--r--