Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>dojox.fx - animation sets to use!</title>
                
        <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
        <script type="text/javascript" src="../_base.js"></script>
        <style type="text/css">
                @import "../../../dojo/resources/dojo.css";
                @import "../../../dijit/themes/dijit.css";
                @import "../../../dijit/themes/tundra/tundra.css";
                @import "../../../dijit/tests/css/dijitTests.css";
        
                #crossfade {
                        position:absolute;
                        top:0;
                        left:300px; 
                        border:2px solid #ededed; 
                        width:50px; height:50px; 
                        background:#fff; 
                        text-align:center; 
                }
        
                table tr { padding:5px; margin:5px; border:1px solid #ccc; }

                .box { 
                        width:75px; height:75px; float:left;
                        border:1px solid #ededed;
                        padding:20px;
                        background-color:#fee; 
                }
                .two { background-color:#c7bedd; } 
                .nopad { padding:0 !important;
                        width:100px; height:100px; border:0;
                 } 
                .hidden {
                        opacity:0;
                }
        </style>
        <script type="text/javascript">
                dojo.require("dijit.form.Button");
                dojo.require("dijit.TitlePane");
        
                function basicXfade(){
                        dojox.fx.crossFade({
                                nodes: [dojo.byId('node1'),dojo.byId('node2')],
                                duration: 1000
                        }).play();
                };

                function absoluteXfade(){
                        dojox.fx.crossFade({
                                nodes: ["node3","node4"],
                                duration:1000
                        }).play();
                };

                var _anim; 
                function simpleLoop(){
                        dojo.byId('button').disabled = "disabled"; 
                        _anim = dojox.fx.crossFade({
                                nodes: ["node5","node6"],
                                duration:1000
                        });
                        dojo.connect(_anim,"onEnd","simpleLoop");
                        _anim.play(500);
                };
                function stopLoop(){ _anim.stop(); }

                function buttonExample(){
                        dojox.fx.crossFade({
                                nodes: [
                                        // FIXME: fails in ie6?!?
                                        dijit.byId('node7').domNode, 
                                        dijit.byId('node8').domNode
                                        ],
                                duration: 350
                        }).play();
                }

                dojo.addOnLoad(function(){
                        // this is a hack to make nodes with class="hidden" hidden
                        // because ie6 is a horrible wretched beast
                        dojo.query(".hidden").forEach(function(node){
                                dojo.style(node,"opacity","0"); 
                        });


                });

        </script>
</head>
<body class="tundra">
        <h1 class="testTitle">dojox.fx.crossFade test</h1>

        
        <h3>a simple demonstration of two nodes fading simultaneously</h3>
        <div>
        <input type="button" onclick="basicXfade()" value="run" />
        <div style="padding:20px">
                <div id="node1" style="display:inline;" class="box hidden">box1</div>
                <div id="node2" class="box">box2</div>
        </div>
        <br style="clear:both">
        </div>

        <h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3>
        <input type="button" onclick="absoluteXfade()" value="run" />
        <div>
                <div style="width:100px; height:100px; position:relative; border:1px solid #666; ">
                        <div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div>
                        <div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div>
                </div>
        <br style="clear:both">
        </div>

        <h3>simple looping crossfade</h3>
        <input type="button" onclick="simpleLoop()" value="run" id="button" />
        <div>
        <div style="padding:20px;">
                        <div id="node5" class="box nopad">box one</div>
                        <div id="node6" class="box two nopad hidden">box two</div>
        </div>
        <br style="clear:both">
        </div>

        <!-- FIXME: acting oddly, only in IE though 
        <h3>An example of cross-fading a dijit.form.Button</h3>
        <input type="button" onclick="buttonExample()" value="run" id="button" />
        <div>
        <div style="position:relative;">
                <div dojoType="dijit.TitlePane" id="node7" 
                        style="position:absolute; top:0; left:0;">Lorem content two</div>
                <div dojoTYpe="dijit.TitlePane" id="node8" class="hidden"
                        style="position:absolute; top:0; left:0;">Lorem content one</div>
        </div>
        <br style="clear:both;">
        </div>
        -->

        <h3>that's all, folks...</h3>

</body>
</html>