You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
217 lines
6.7 KiB
217 lines
6.7 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title> |
|
|
|
<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"; |
|
@import "_animation.css"; /* external stylesheets to enhance readability in this test */ |
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" |
|
data-dojo-config="isDebug:true, parseOnLoad: true" ></script> |
|
|
|
<script type="text/javascript"> |
|
dojo.require("dojo.parser"); |
|
dojo.require("dijit.form.Button"); |
|
dojo.require("dojox.fx.style"); |
|
dojo.require("dojox.fx.ext-dojo.NodeList-style"); |
|
</script> |
|
</head> |
|
<body class="tundra"> |
|
|
|
<h1 class="testTitle">dojox.fx.style tests</h1> |
|
|
|
<p id="fontTest"> |
|
dojox.fx.style provides a few methods to animate the changes that would occur |
|
when adding or removing a class from a domNode. |
|
</p> |
|
<ul class="testUl" id="test1"> |
|
<li class="baseFont">dojox.fx.addClass(node, className, animargs); // Returns dojo.Animation</li> |
|
<li class="baseFont">dojox.fx.removeClass(node, className, animargs); // Returns dojo.Animation</li> |
|
<li class="baseFont">dojox.fx.toggleClass(node, className, force, animargs)</li> |
|
</ul> |
|
|
|
<button dojoType="dijit.form.Button"> |
|
spacing test |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojo.query("li.baseFont").toggleClassFx("spacedHorizontal").play(5); |
|
</script> |
|
</button> |
|
|
|
<button dojoType="dijit.form.Button"> |
|
line-height test |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojo.query("li.baseFont").toggleClassFx("spacedVertical").play(5); |
|
</script> |
|
</button> |
|
|
|
<button dojoType="dijit.form.Button"> |
|
font-size test |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojo.query("li.baseFont").toggleClassFx("fontSizeTest").play(5); |
|
</script> |
|
</button> |
|
|
|
<h2>testing sizes</h2> |
|
|
|
<button dojoType="dijit.form.Button" id="addTall"> |
|
add .tall |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
var delay = 500; |
|
var _anims = []; |
|
dojo.query("#colorTest > .testBox").forEach(function(n){ |
|
_anims.push(dojox.fx.addClass(n, "tall", { |
|
delay: delay |
|
})); |
|
delay += 200; |
|
}); |
|
this.set('disabled',true); |
|
dijit.byId('removeTall').set('disabled',false); |
|
dojo.fx.combine(_anims).play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button" id="removeTall" disabled="true"> |
|
remove .tall |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
var delay = 500; |
|
var _anims = []; |
|
dojo.query("#colorTest > .testBox").forEach(function(n){ |
|
_anims.push(dojox.fx.removeClass(n, "tall", { |
|
delay: delay |
|
})); |
|
delay += 200; |
|
}); |
|
this.set('disabled', true); |
|
dijit.byId('addTall').set('disabled',false); |
|
dojo.fx.combine(_anims).play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button" id="addWide"> |
|
add .wide |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
var delay = 500; |
|
var _anims = []; |
|
dojo.query("#colorTest > .testBox").forEach(function(n){ |
|
_anims.push(dojox.fx.addClass(n, "wide", { |
|
delay: delay |
|
})); |
|
delay += 200; |
|
}); |
|
this.set('disabled',true); |
|
dijit.byId('removeWide').set('disabled',false); |
|
dojo.fx.combine(_anims).play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button" id="removeWide" disabled="true"> |
|
remove .wide |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
var delay = 500; |
|
var _anims = []; |
|
dojo.query("#colorTest > .testBox").forEach(function(n){ |
|
_anims.push(dojox.fx.removeClass(n, "wide", { |
|
delay: delay |
|
})); |
|
delay += 200; |
|
}); |
|
this.set('disabled',true); |
|
dijit.byId('addWide').set('disabled',false); |
|
dojo.fx.combine(_anims).play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button"> |
|
toggle .tiny |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
var _anims = []; |
|
// until dojox.fx.NodeList-fx is ready: |
|
dojo.query("#colorTest > .testBox").forEach(function(node){ |
|
_anims.push(dojox.fx.toggleClass(node, "tiny")); |
|
}) |
|
dojo.fx.combine(_anims).play(5); |
|
</script> |
|
</button> |
|
|
|
<button dojoType="dijit.form.Button"> |
|
query add tall |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojo.query("#colorTest > .testBox").addClassFx("tall").play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button"> |
|
query remove tall |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojo.query("#colorTest > .testBox").removeClassFx("tall").play(); |
|
</script> |
|
</button> |
|
|
|
|
|
|
|
<div id="colorTest"> |
|
<div id="colorTest1" class="floating testBox white"></div> |
|
<div id="colorTest2" class="floating testBox black"></div> |
|
<div id="colorTest3" class="floating testBox green"></div> |
|
</div> |
|
|
|
<br style="clear:both"> |
|
|
|
<h2>testing position</h2> |
|
<p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos. |
|
normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar |
|
will take precedent. the below position test shows the results of this: |
|
</p> |
|
|
|
<button dojoType="dijit.form.Button"> |
|
.offsetSome |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojox.fx.toggleClass("positionTest","offsetSome").play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button"> |
|
.topLeft |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojox.fx.toggleClass("positionTest","topLeft").play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button"> |
|
.bottomRight |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojox.fx.toggleClass("positionTest","bottomRight").play(); |
|
</script> |
|
</button> |
|
|
|
<div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock"> |
|
<div class="testBox absolutely" id="positionTest"></div> |
|
</div> |
|
|
|
<button dojoType="dijit.form.Button"> |
|
toggle .green |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojox.fx.toggleClass("positionTest","green").play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button"> |
|
toggle .black |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojox.fx.toggleClass("positionTest","black").play(); |
|
</script> |
|
</button> |
|
<button dojoType="dijit.form.Button"> |
|
toggle .blue |
|
<script type="dojo/method" data-dojo-event="onClick"> |
|
dojox.fx.toggleClass("positionTest","blue").play(); |
|
</script> |
|
</button> |
|
|
|
<p>Some properties |
|
cannot be modified (fontFace, and so on), so to ensure the results at the end |
|
of the animation are applied correctly and fully, the class name is set on the node |
|
via dojo.add/removeClass(). |
|
</p> |
|
|
|
</body> |
|
</html> |
|
|
|
|