Module Example
<![CDATA[
<!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=iso-8859-1">
<title>YAHOO.widget.Module</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/module.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container_core.js"></script>
<style>
</style>
<script language="javascript">
YAHOO.namespace("example.module");
YAHOO.example.module.modules = [];
function init() {
// *****************************************************************
// This represents a Overlay already on the page
// *****************************************************************
YAHOO.example.module.mPredefined = new YAHOO.widget.Module("mPredefined", {visible:true} );
YAHOO.example.module.mPredefined.render();
// *****************************************************************
// This represents an Overlay completely pre-constructed from code
// *****************************************************************
YAHOO.example.module.mDynamic = new YAHOO.widget.Module("mDynamic", {visible:true} );
YAHOO.example.module.mDynamic.setHeader("Completely dynamic overlay");
YAHOO.example.module.mDynamic.setBody("I was created completely at runtime!");
YAHOO.example.module.mDynamic.render(document.getElementById("mainBody"));
// *****************************************************************
// This represents a overlay with a container, but no body content defined
// *****************************************************************
YAHOO.example.module.mChangedAtRuntime = new YAHOO.widget.Module("mChangedAtRuntime", {visible:true} );
YAHOO.example.module.mChangedAtRuntime.setHeader("I was changed at runtime!");
YAHOO.example.module.mChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
YAHOO.example.module.mChangedAtRuntime.setFooter("The footer was changed too!");
YAHOO.example.module.mChangedAtRuntime.render();
// *****************************************************************
YAHOO.example.module.modules["mPredefined"] = YAHOO.example.module.mPredefined;
YAHOO.example.module.modules["mDynamic"] = YAHOO.example.module.mDynamic;
YAHOO.example.module.modules["mChangedAtRuntime"] = YAHOO.example.module.mChangedAtRuntime;
var btnShow = document.getElementById("btnShow");
btnShow.onclick = showAll;
var btnHide = document.getElementById("btnHide");
btnHide.onclick = hideAll;
}
function hideAll() {
for (var i in YAHOO.example.module.modules) {
var m = YAHOO.example.module.modules[i];
m.hide();
}
}
function showAll() {
for (var i in YAHOO.example.module.modules) {
var m = YAHOO.example.module.modules[i];
m.show();
}
}
function create() {
var form = document.forms["overlayform"];
// get form values
var id = form["id"].value;
var header = form["header"].value;
var body = form["body"].value;
var footer = form["footer"].value;
var visible = form["visible"].checked;
var args = {};
args.visible = visible;
var newMod;
var isNew = true;
if (YAHOO.example.module.modules[id]) {
newMod = YAHOO.example.module.modules[id];
newMod.cfg.applyConfig(args);
isNew = false;
} else {
newMod = new YAHOO.widget.Module(id, args);
YAHOO.example.module.modules[id] = newMod;
}
if (header) {
newMod.setHeader(header);
}
if (body) {
newMod.setBody(body);
}
if (footer) {
newMod.setFooter(footer);
}
if (isNew) {
newMod.render(document.getElementById("mainBody"));
} else {
newMod.render();
}
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div class="box">
<div class="hd">
<h1>Module Example</h1>
</div>
<div class="bd" id="mainBody">
<button id="btnHide">Hide All</button>
<button id="btnShow">Show All</button>
<div id="content">
<p>A Module is an object representation of Yahoo!'s Standard Module Format. A Module can optionally contain three elements (but must include at least one): a header, a body, and a footer, each which are denoted by CSS classes: "hd", "bd", and "ft" respectively. An empty module would look like this:</p>
<xmp><div id="myModule">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>]]>
Modules can be constructed by attaching the Module object to pre-existing markup, or dynamically creating them from scratch and appending them to the DOM. The code to create a Module around that markup would look as simple as this:
myModule = new YAHOO.widget.Module("myModule");
A Module can be dynamically created by passing the arbitrary ID of the Module to create into the constructor, setting some content, and rendering the Module using the render method, passing in the node that the Module should be appended to, as in this example:
myDynamicModule = new YAHOO.widget.Module("myDynamicModule");
myDynamicModule.setBody("Here's some body content.");
myDynamicModule.render(document.getElementById("dynamic"));
Here are some example modules, including the one from above: