diff options
Diffstat (limited to 'includes/js/dojox/fx/tests/test_slideBy.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/test_slideBy.html | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/test_slideBy.html b/includes/js/dojox/fx/tests/test_slideBy.html new file mode 100644 index 0000000..a1a1960 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_slideBy.html @@ -0,0 +1,75 @@ +<!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"; + + + #sizeToTest { + position:absolute; + top:0; + left:300px; + border:2px solid #ededed; + width:50px; height:50px; + background:#fff; + text-align:center; + } + .test { width:100px; height:50px; border:3px solid #333; + position:absolute; + } + .box1 { top:20px; left:10px; } + .box2 { top:85px; left:10px; } + .box3 { top:170px; left:10px; } + .holder { position:relative; height:300px; } + + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.ext-dojo.NodeList"); + + function chainTest(){ + // FIXME: not recalculating mixin in init? or not re-mixing, rather. + // happens to a lot of propertyAnimations, actually when chaining, with a + // fixed 'start' property in the mixin. see _base/fx.js:slideBy() + dojo.fx.chain([ + dojox.fx.slideBy({ node: 'sizeToTest', top:50, left:50, duration:400 }), + dojox.fx.slideBy({ node: 'sizeToTest', top:25, left:-25, duration:400 }) + ]).play(); + } + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.slideBy test</h1> + + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:50, duration:200 }).play()">top: 50, left:50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:50, duration:400 }).play()">top:-50, left:50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:-50, duration:400 }).play()">top:-50, left:-50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:-50, duration:400 }).play()">top:50, left:-50</a> + <a href="#" onclick="javascript:dojo.query('.test').slideBy({ top:0, left:300 }).play()">dojo.query()</a> + <a href="#" onclick="javascript:chainTest()">chainTest</a> + + <div id="sizeToTest"> + lorem. ipsum. + </div> + + <br style="clear:both;"> + + <div class="holder"> + <div class="test box1">a</div><div class="test box2">b</div><div class="test box3">c</div> + </div> + + + HTML AFTER + <br> + + + +</body> +</html> |