JavaScript DHTML/Ajax Layer/DOM Utilities
Содержание
DOM Example: getElementsByClassName
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: getElementsByClassName</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var count = function(e) {
var elements = YAHOO.util.Dom.getElementsByClassName("test");
alert(elements.length);
};
YAHOO.util.Event.addListener(document, "click", count);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: getElementsByClassName
This example demonstrates how to use Dom.getByClassName to get a collection of elements with a particular class name.
Click anywhere to test.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
DOM Example: getStyle
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: getStyle</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var change = function(e) {
var bgColor = YAHOO.util.Dom.getStyle("end", "backgroundColor");
YAHOO.util.Dom.setStyle("test", "backgroundColor", bgColor);
};
YAHOO.util.Event.addListener(document, "click", change);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: getStyle
This example demonstrates how to use Dom.getStyle to get the current style of an element.
Click anywhere to get the background color of the red element and apply it to the gray element.
</body> </html>
</source>
DOM Example: getXY
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: getXY</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var move = function(e) {
var xy = YAHOO.util.Dom.getXY("end");
YAHOO.util.Dom.setXY("test", xy);
};
YAHOO.util.Event.addListener(document, "click", move);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: getXY
This example demonstrates how to use Dom.getXY to get an elements position.
Click anywhere and the grey element will move to the red element.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
DOM Example: hasClass
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: hasClass</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var test = function(e) {
alert(YAHOO.util.Dom.hasClass("test", "foo"));
};
YAHOO.util.Event.addListener(document, "click", test);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: hasClass
This example demonstrates how to use Dom.hasClass to test whether a class is assigned to a given element.
Click anywhere to test.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
DOM Example: removeClass
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: removeClass</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var remove = function(e) {
YAHOO.util.Dom.removeClass("test", "foo");
alert(document.getElementById("test").className);
};
YAHOO.util.Event.addListener(document, "click", remove);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: removeClass
This example demonstrates how to use Dom.addClass to remove a class from a given element.
Click anywhere to test.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
DOM Example: setStyle
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: setStyle</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var fade = function(e) {
YAHOO.util.Dom.setStyle("fade", "opacity", .5);
};
YAHOO.util.Event.addListener(document, "click", fade);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: setStyle
This example demonstrates how to use Dom.setStyle to set the opacity of an element.
Click anywhere to set the element"s opacity.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
DOM Example: setXY
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: setXY</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var move = function(e) {
var xy = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)];
YAHOO.util.Dom.setXY("test", xy);
};
YAHOO.util.Event.addListener(document, "click", move);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: setXY
This example demonstrates how to use Dom.setXY to set an elements position.
Click anywhere and the element will move to the click point.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
DOM Utilities: addClass
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DOM Example: addClass</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> <script type="text/javascript"> YAHOO.namespace("example.dom"); YAHOO.example.dom.init = function() {
var add = function(e) {
YAHOO.util.Dom.addClass("test", "bar");
alert(document.getElementById("test").className);
};
YAHOO.util.Event.addListener(document, "click", add);
}; YAHOO.util.Event.addListener(window, "load", YAHOO.example.dom.init); </script> <link rel="stylesheet" type="text/css" href="./examples/dom/css/dom.css"> </head> <body>
DOM Example: addClass
This example demonstrates how to use Dom.addClass to add a class to a given element.
Click anywhere to test.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Module Example
<source lang="html4strict">
<!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("My original markup text was replaced at runtime with this text.");
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>
Module Example
<button id="btnHide">Hide All</button>
<button id="btnShow">Show All</button>
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:
<xmp>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:
<form onsubmit="return false" id="overlayform">
</form> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
