Mega Code Archive
Demo of MochiKit Visual Elements
<![CDATA[
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo of MochiKit Visual Elements</title>
<style type="text/css">
h1 { background: darkgreen; color: yellow; text-align: center; }
h2 { background: darkgreen; color: yellow; padding-top: 0.25em;}
.invisible { display: none; }
</style>
<script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript">
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;
}
});
</script>
</head>
<body>
<h1>MochiKit.Visual <span id="visual_version"></span></h1>
<h2>Rounded Corners</h2>
<p>
This example demonstrates the rounded corners functionality of
<a href="http://mochikit.com">MochiKit</a>'s
<a href="../../doc/html/lib/MochiKit/Visual.html">MochiKit.Visual</a>.
</p>
<p>
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.
</p>
View Source:
<ul>
<li><a href="rounded_corners.js" class="view-source">rounded_corners.js</a></li>
<li><a href="index.html" class="view-source">index.html</a></li>
</ul>
</body>
</html>
]]>