Demo of MochiKit Visual Elements
h1 { background: darkgreen; color: yellow; text-align: center; }
h2 { background: darkgreen; color: yellow; padding-top: 0.25em;}
.invisible { display: none; }
var roundedCornersOnLoad = function () {
swapDOM("visual_version", SPAN(null, MochiKit.Visual.VERSION));
roundClass("h1", null);
roundClass("h2", null, {corners: "bottom"});
};
addLoadEvent(roundedCornersOnLoad);
// rewrite the view-source links
addLoadEvent(function () {
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "rounded_corners/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page + href;
}
});
MochiKit.Visual
Rounded Corners
This example demonstrates the rounded corners functionality of
MochiKit's
MochiKit.Visual.
The heading at the top of this page should have all four corners
rounded. The heading for this section should just have the bottom
corners rounded.
View Source:
rounded_corners.js
index.html