YAHOO.widget.OverlayManager
YAHOO.namespace("example.overlaymanager");
function init() {
// *****************************************************************
// This represents a Overlay already on the page
// *****************************************************************
YAHOO.example.overlaymanager.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
YAHOO.example.overlaymanager.oPredefined.render();
// *****************************************************************
// This represents an Overlay completely pre-constructed from code
// *****************************************************************
YAHOO.example.overlaymanager.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
YAHOO.example.overlaymanager.oDynamic.setHeader("Completely dynamic overlay");
YAHOO.example.overlaymanager.oDynamic.setBody("I was created completely at runtime!");
YAHOO.example.overlaymanager.oDynamic.render(document.body);
// *****************************************************************
// This represents a overlay with a container, but no body content defined
// *****************************************************************
YAHOO.example.overlaymanager.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
YAHOO.example.overlaymanager.oChangedAtRuntime.setHeader("I was changed at runtime!");
YAHOO.example.overlaymanager.oChangedAtRuntime.setBody("My original markup text was replaced at runtime with this text.");
YAHOO.example.overlaymanager.oChangedAtRuntime.setFooter("The footer was changed too!");
YAHOO.example.overlaymanager.oChangedAtRuntime.render();
// *****************************************************************
YAHOO.example.overlaymanager.mgr = new YAHOO.widget.OverlayManager( { overlays:[YAHOO.example.overlaymanager.oPredefined,YAHOO.example.overlaymanager.oDynamic,YAHOO.example.overlaymanager.oChangedAtRuntime] } );
var button2 = document.getElementById("btnHide");
button2.onclick = hideAll;
var button3 = document.getElementById("btnShow");
button3.onclick = showAll;
var dd1 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oDynamic.element.id, "module");
dd1.onDrag = function() {
YAHOO.example.overlaymanager.oDynamic.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oDynamic.element);
YAHOO.example.overlaymanager.oDynamic.cfg.setProperty("xy", pos);
}
var dd2 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oPredefined.element.id, "module");
dd2.onDrag = function() {
YAHOO.example.overlaymanager.oPredefined.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oPredefined.element);
YAHOO.example.overlaymanager.oPredefined.cfg.setProperty("xy", pos);
}
var dd3 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oChangedAtRuntime.element.id, "module");
dd3.onDrag = function() {
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oChangedAtRuntime.element);
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.setProperty("xy", pos);
}
}
function hideAll() {
YAHOO.example.overlaymanager.mgr.hideAll();
}
function showAll() {
YAHOO.example.overlaymanager.mgr.showAll();
}
function create() {
var form = document.forms["overlayform"];
// get form values
var id = form["id"].value;
var x = form["x"].value;
var y = form["y"].value;
var header = form["header"].value;
var body = form["body"].value;
var footer = form["footer"].value;
var visible = form["visible"].checked;
var effectArg;
if (form["effect"].selectedIndex > 0) {
var dur = form["duration"].value;
if (! dur) {
dur = 0.5;
} else {
dur = parseFloat(dur);
}
var effect = form["effect"].options[form["effect"].selectedIndex].value;
var effectClass = eval(effect);
effectArg = {
effect:effectClass,
duration:dur
}
}
var width = form["width"].value;
var height = form["height"].value;
var zIndex = form["zIndex"].value;
var constrain = form["constraintoviewport"].checked;
var useIframe = form["iframe"].checked;
var fixedcenter = form["fixedcenter"].checked;
var context = form["context"].value;
var contextArg = new Array();
if (context) {
contextArg[0] = context;
contextArg[1] = form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
contextArg[2] = form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
}
var args = {};
args.visible = visible;
if (effectArg) {
args.effect = effectArg;
}
if (x) {
args.x = parseInt(x);
}
if (y) {
args.y = parseInt(y);
}
if (width) {
args.width = width;
}
if (height) {
args.height = height;
}
if (constrain) {
args.constraintoviewport = true;
}
if (useIframe) {
args.iframe = true;
}
if (fixedcenter) {
args.fixedcenter = true;
}
if (contextArg.length > 0) {
args.context = contextArg;
}
var newMod;
var isNew = true;
if (YAHOO.example.overlaymanager.mgr.find(id)) {
newMod = YAHOO.example.overlaymanager.mgr.find(id);
newMod.cfg.applyConfig(args);
isNew = false;
} else {
newMod = new YAHOO.widget.Overlay(id, args);
YAHOO.example.overlaymanager.mgr.register(newMod);
}
if (header) {
newMod.setHeader(header);
}
if (body) {
newMod.setBody(body);
}
if (footer) {
newMod.setFooter(footer);
}
if (isNew) {
newMod.render(document.body);
} else {
newMod.render();
}
}
YAHOO.util.Event.addListener(window, "load", init);
OverlayManager Example
OverlayManager is used to manage the focused state of a collection of Overlay objects. Creating an OverlayManager and registering an Overlay is simple:
mgr = new YAHOO.widget.OverlayManager();
mgr.register(myOverlay);
Note that when you click on an Overlay, the Overlay is highlighted, indicating that it currently has the focus. This is because the OverlayManager keeps track of which of the registered Overlays currently is focused, and ensures that the z-index of that Overlay is the highest.