Module Example
<!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></xmp>
<p>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:
<code>myModule = new YAHOO.widget.Module("myModule");</code>
</p>
<p>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:
<code>
myDynamicModule = new YAHOO.widget.Module("myDynamicModule");<br/>
myDynamicModule.setBody("Here's some body content.");<br/>
myDynamicModule.render(document.getElementById("dynamic"));<br/>
</code>
</p>
<p>Here are some example modules, including the one from above:</p>
</div>
<div id="mPredefined" class="module">
<div class="hd">Predefined Module Header</div>
<div class="bd">I was created using simple predefined markup.</div>
<div class="ft">Predefined Module Footer</div>
</div>
<div id="mChangedAtRuntime" class="module">
<div class="hd">Placeholder Header</div>
<div class="bd">This is only placeholder text in the markup.</div>
<div class="ft">Placeholder Footer</div>
</div>
<div id="dynamic"></div>
</div>
<div class="ft"></div>
</div>
<form onsubmit="return false" id="overlayform">
<div class="overlayform">
<div class="formheader">
Create / Modify a Dynamic Module
</div>
<div class="row header">
<div class="label" style="text-align:center">Property</div><div class="formw">Value</div>
</div>
<div class="row first">
<div class="label">ID</div><div class="formw"><input type="text" name="id" /></div>
</div>
<div class="row">
<div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></div>
</div>
<div class="row first">
<div class="label">Header</div><div class="formw"><textarea name="header"></textarea></div>
</div>
<div class="row first">
<div class="label">Body</div><div class="formw"><textarea name="body"></textarea></div>
</div>
<div class="row first">
<div class="label">Footer</div><div class="formw"><textarea name="footer"></textarea></div>
</div>
<div class="row last">
<div class="label"></div><div class="formw"><button onclick="create()">create/modify my Module</button></div>
</div>
</div>
</form>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category