Demo of MochiKit Visual Elements

 
<!--
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>
Related examples in the same category

1.	Test Effects
2.	Full Effects Test Suite
Demo of MochiKit Visual Elements : Effect « Mochkit « JavaScript DHTML

Related examples in the same category
