diff options
Diffstat (limited to 'includes/js/dojox/fx/tests/test_crossFade.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/test_crossFade.html | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/test_crossFade.html b/includes/js/dojox/fx/tests/test_crossFade.html new file mode 100644 index 0000000..330a34a --- /dev/null +++ b/includes/js/dojox/fx/tests/test_crossFade.html @@ -0,0 +1,145 @@ +<!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> |