overlay.html revision 35608f53407f28b0868c7e1b0265570ef7abfc05
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Widget Class</title>
<link rel="stylesheet" type="text/css" href="/build/cssreset/reset.css" />
<link rel="stylesheet" type="text/css" href="/build/cssfonts/fonts.css" />
<script type="text/javascript" src="/build/yui/yui.js"></script>
<link rel="stylesheet" type="text/css" href="/build/widget/assets/widget-stack-core.css" />
<link rel="stylesheet" type="text/css" href="/build/overlay/assets/overlay-core.css" />
<script type="text/javascript" src="/build/widget/widget.js"></script>
<script type="text/javascript" src="/build/widget/widget-position.js"></script>
<script type="text/javascript" src="/build/widget/widget-stack.js"></script>
<script type="text/javascript" src="/build/widget/widget-position-ext.js"></script>
<script type="text/javascript" src="/build/widget/widget-stdmod.js"></script>
<script type="text/javascript" src="/build/overlay/overlay.js"></script>
<style>
.hideme {
width:20em;
display:block;
}
.yui-overlay {
border:1px solid #000;
background-color:#eee;
padding:5px;
}
.yui-overlay .yui-overlay-content {
border:2px solid #000000;
padding:2px;
}
.yui-widget-stdmod span {
background-color:#000;
color:#fff;
}
.yui-widget-stdmod .yui-widget-hd {
border:2px solid red;
background-color:#cc0000;
color:#fff;
padding:2px;
}
.yui-widget-stdmod .yui-widget-bd {
font-family:monospace;
border:2px solid blue;
padding:2px;
}
.yui-widget-stdmod .yui-widget-ft {
border:2px solid green;
background-color:#00cc00;
color:#fff;
padding:2px;
}
.sels {
position:absolute;
}
#align {
opacity:.5;
filter:alpha(opacity=50);
position:relative;
z-index:6;
top:20px;
left:400px;
width:300px;
height:250px;
border:1px solid black;
background-color:#cc0000;
}
</style>
</head>
<body class="yui-skin-sam">
<div class="sels">
<button id="control-show" type="button">show</button>
<button id="control-hide" type="button">hide</button>
<div style="overflow:auto;width:20em;height:5em">
<div style="height:200em"></div>
</div>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
<select class="hideme"><option>Foo</option></select>
</div>
<div id="align">
Align Here
</div>
<div class="foo" id="foobar"></div>
<div id="fromMarkup">
<div class="yui-widget-hd">
<span>Header From Markup</span>
</div>
<div class="yui-widget-bd">
<span>Body From Markup</span>
</div>
<div class="yui-widget-ft">
<span>Footer From Markup</span>
</div>
</div>
<script type="text/javascript">
var widget, widget2;
// Queue is missing a "requires" event
YUI({base:"/build/", filter:"raw"}).use("event", "queue", "overlay", function(Y) {
widget = new Y.Overlay({
width:"12em",
align:{node:'#align', points:["tr", "tl"]},
zIndex:5,
header:"Overlay Header",
body:"width:12em, #align, tr, tl, zIndex:5",
footer:"Overlay Footer"
});
widget.render("#foobar");
Y.on('click', Y.bind(widget.show, widget), Y.Node.get('#control-show'));
Y.on('click', Y.bind(widget.hide, widget), Y.Node.get('#control-hide'));
widget2 = new Y.Overlay({
contentBox: "#fromMarkup",
width:200,
height:200,
zIndex:3,
xy: [800,200]
});
widget2.render();
widget.after("xyChange", function(e) {
Y.log(e.newVal);
});
var stepDelay = 2000;
Y.Queue(
{
timeout:stepDelay,
fn:function() {
widget.move(0,0);
widget.set("body", "move(0,0)");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("height", "12em");
widget.set("body", "height, 12em");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("align", {node:"#align", points:["cl", "cr"]});
widget.set("body", "#align, cl, cr");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("center", "#align");
widget.set("body", "#align, center");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("zIndex", 7);
widget.set("body", "zIndex, 7");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("align", {points:["cr", "cr"]});
widget.set("body", "viewport, cr, cl");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("center", true);
widget.set("body", "viewport, center");
}
},
{
timeout:stepDelay,
fn:function() {
widget.move(0, 0);
widget.set("body", "move(0,0)");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("width", "20em");
widget.set("body", "width, 20em");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("height", "20em");
widget.set("body", "height, 20em");
}
},
{
timeout:stepDelay,
fn:function() {
widget.set("fillHeight", "header");
widget.set("body", "fillHeight, header");
}
},
{
timeout:stepDelay,
fn:function() {
widget.setHeader(Y.Node.create("<p>Insert Before Header Content</p>"), Y.WidgetStdMod.BEFORE);
widget.setFooter(Y.Node.create("<p>Append After Footer Content</p>"), Y.WidgetStdMod.AFTER);
widget.setBody("Replace Body - DONE!", Y.WidgetStdMod.REPLACE);
}
}
).run();
});
</script>
</body>
</html>