223 lines
10 KiB
HTML
223 lines
10 KiB
HTML
|
<!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>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
|
||
|
|
<script type="text/javascript" src="../style.js"></script><!-- debugging -->
|
||
|
|
<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">
|
||
|
|
dojo.require("dojox.fx.style");
|
||
|
|
dojo.require("dijit.form.Button");
|
||
|
|
|
||
|
|
</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(/* Object */)args); // Returns dojo._Animation</li>
|
||
|
|
<li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li>
|
||
|
|
<li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
spacing test
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var _anims = [];
|
||
|
|
// until dojox.fx.NodeList-fx is ready:
|
||
|
|
dojo.query("li.baseFont").forEach(function(node){
|
||
|
|
_anims.push(dojox.fx.toggleClass(node,"spacedHorizontal"));
|
||
|
|
})
|
||
|
|
dojo.fx.combine(_anims).play(5);
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
line-height test
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var _anims = [];
|
||
|
|
// until dojox.fx.NodeList-fx is ready:
|
||
|
|
dojo.query("li.baseFont").forEach(function(node){
|
||
|
|
_anims.push(dojox.fx.toggleClass(node,"spacedVertical"));
|
||
|
|
})
|
||
|
|
dojo.fx.combine(_anims).play(5);
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
font-size test
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var _anims = [];
|
||
|
|
// until dojox.fx.NodeList-fx is ready:
|
||
|
|
dojo.query("li.baseFont").forEach(function(node){
|
||
|
|
_anims.push(dojox.fx.toggleClass(node,"fontSizeTest"));
|
||
|
|
})
|
||
|
|
dojo.fx.combine(_anims).play(5);
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<h2>testing sizes</h2>
|
||
|
|
|
||
|
|
<button dojoType="dijit.form.Button" id="addTall">
|
||
|
|
add .tall
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var delay = 500;
|
||
|
|
var _anims = [];
|
||
|
|
dojo.query("#colorTest > .testBox").forEach(function(n){
|
||
|
|
_anims.push(dojox.fx.addClass({
|
||
|
|
node:n,
|
||
|
|
cssClass:"tall",
|
||
|
|
delay: delay
|
||
|
|
}));
|
||
|
|
delay+=200;
|
||
|
|
});
|
||
|
|
this.setAttribute('disabled',true);
|
||
|
|
dijit.byId('removeTall').setAttribute('disabled',false);
|
||
|
|
dojo.fx.combine(_anims).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button" id="removeTall" disabled="true">
|
||
|
|
remove .tall
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var delay = 500;
|
||
|
|
var _anims = [];
|
||
|
|
dojo.query("#colorTest > .testBox").forEach(function(n){
|
||
|
|
_anims.push(dojox.fx.removeClass({
|
||
|
|
node:n,
|
||
|
|
cssClass:"tall",
|
||
|
|
delay: delay
|
||
|
|
}));
|
||
|
|
delay+=200;
|
||
|
|
});
|
||
|
|
this.setAttribute('disabled',true);
|
||
|
|
dijit.byId('addTall').setAttribute('disabled',false);
|
||
|
|
dojo.fx.combine(_anims).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button" id="addWide">
|
||
|
|
add .wide
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var delay = 500;
|
||
|
|
var _anims = [];
|
||
|
|
dojo.query("#colorTest > .testBox").forEach(function(n){
|
||
|
|
_anims.push(dojox.fx.addClass({
|
||
|
|
node:n,
|
||
|
|
cssClass:"wide",
|
||
|
|
delay: delay
|
||
|
|
}));
|
||
|
|
delay+=200;
|
||
|
|
});
|
||
|
|
this.setAttribute('disabled',true);
|
||
|
|
dijit.byId('removeWide').setAttribute('disabled',false);
|
||
|
|
dojo.fx.combine(_anims).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button" id="removeWide" disabled="true">
|
||
|
|
remove .wide
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
var delay = 500;
|
||
|
|
var _anims = [];
|
||
|
|
dojo.query("#colorTest > .testBox").forEach(function(n){
|
||
|
|
_anims.push(dojox.fx.removeClass({
|
||
|
|
node:n,
|
||
|
|
cssClass:"wide",
|
||
|
|
delay: delay
|
||
|
|
}));
|
||
|
|
delay+=200;
|
||
|
|
});
|
||
|
|
this.setAttribute('disabled',true);
|
||
|
|
dijit.byId('addWide').setAttribute('disabled',false);
|
||
|
|
dojo.fx.combine(_anims).play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
toggle .tiny
|
||
|
|
<script type="dojo/method" 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>
|
||
|
|
|
||
|
|
<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" event="onClick">
|
||
|
|
dojox.fx.toggleClass("positionTest","offsetSome").play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
.topLeft
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojox.fx.toggleClass("positionTest","topLeft").play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
.bottomRight
|
||
|
|
<script type="dojo/method" 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" event="onClick">
|
||
|
|
dojox.fx.toggleClass("positionTest","green").play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
toggle .black
|
||
|
|
<script type="dojo/method" event="onClick">
|
||
|
|
dojox.fx.toggleClass("positionTest","black").play();
|
||
|
|
</script>
|
||
|
|
</button>
|
||
|
|
<button dojoType="dijit.form.Button">
|
||
|
|
toggle .blue
|
||
|
|
<script type="dojo/method" 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>
|
||
|
|
|