dojo.byId viewDemo_java dojo.byid-优快云博客

本文介绍了一个使用Dojo工具包实现元素隐藏与显示动画效果的示例。通过两个按钮控制一个带有特定样式元素的渐隐渐显动画。该示例展示了如何使用Dojo的fadeOut和fadeIn方法，并结合onClick事件进行交互。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <style type="text/css">
            #findMe { width: 200px; height: 100px; background: #f3f3f3; border: 1px
            dotted #ccc; color: #444; padding: 10px; margin: 10px; }
        </style>
    </head>

    <body class="tundra ">
        <button dojoType="dijit.form.Button" id="buttonOne">
            Hide Me!
        </button>
        <button dojoType="dijit.form.Button" id="buttonTwo">
            Show Me!
        </button>
        <div id="findMe">
            Hiya!
        </div>
    </body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.form.Button");

        dojo.addOnLoad(function() {
            var node = dojo.byId("findMe");
            dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
                dojo.fadeOut({
                    node: node,
                    duration: 300
                }).play();
            });
            dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
                dojo.fadeIn({
                    node: node,
                    duration: 300
                }).play();
            })
        });
    </script>
    
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (window.pub) {
                window.pub();
            }
        });
    </script>

</html>