+++ /dev/null
-<!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>
projects / eow / blobdiff