<html>
<head>
<title>WidgetStdMod PE</title>
<style>
body {
padding:0;
margin:0;
}
.yui3-overlay {
background-color:#0000ff;
}
.yui3-overlay .yui3-overlay-content {
border:5px solid #000000;
padding:0.4em;
background-color:#eee;
}
.yui3-overlay .yui3-widget-stdmod .yui3-widget-hd {
border:2px solid red;
background-color:#cc0000;
color:#fff;
padding:2px;
}
.yui3-overlay .yui3-widget-stdmod .yui3-widget-bd {
font-family:monospace;
border:2px solid blue;
padding:2px;
}
.yui3-overlay .yui3-widget-stdmod .yui3-widget-ft {
border:2px solid green;
background-color:#00cc00;
color:#fff;
padding:2px;
}
</style>
</head>
<body class="yui3-skin-sam">
<ul id="instructions">
<li><strong>Left:</strong> All Sections From Markup. All text should have click listeners maintained</li>
<li><strong>Middle:</strong> Header From Markup. Body and Footer from Script. Header text should have click listeners maintained</li>
<li><strong>Right:</strong> All Sections From Script. No listeners to maintain</li>
</ul>
<div id="fromMarkup">
<div class="yui3-widget-hd">
<span>Header From Markup</span>
</div>
<div class="yui3-widget-bd">
<span>Body From Markup</span>
</div>
<div id="fourth" class="yui3-widget-ft">
<span>Footer From Markup</span>
</div>
</div>
<div id="mixed">
<div class="yui3-widget-hd">
<span>Header From Markup</span>
</div>
<div class="yui3-widget-bd">
<span>Body From Markup</span>
</div>
</div>
<script type="text/javascript">
YUI({filter:"raw"}).use("overlay", function(Y) {
Y.on('click', function() { alert('Still Around'); }, Y.Node.all('#fromMarkup span'));
Y.on('click', function() { alert('Still Around'); }, Y.Node.all('#mixed span'));
new Y.Overlay({
srcNode: "#fromMarkup",
width:200,
height:200,
xy: [10,200],
render:true
});
new Y.Overlay({
srcNode: "#mixed",
width:200,
height:200,
bodyContent: "Override Body From Markup with Script",
footerContent: "Footer From Script",
xy: [300,200],
render:true
});
new Y.Overlay({
id: "#fromScript",
width:200,
height:200,
xy: [600, 200],
headerContent: "Header From Script",
bodyContent: "Body From Script",
footerContent: "Footer From Script",
render:true
});
});
</script>
</body>
</html>