Great. You are back.
So we learned how to use
dojo.query() to iterate over a dojo.NodeList() (the results from a dojo.query() call), and fade out each element. It was fairly simple. Important to note (and not covered in the previous post), the first <script> tag for dojo.js needs to be somewhere in the element, and the contents of the second <script> tag needs to be wrapped in a function, and passed to dojo.addOnLoad() ...dojo.addOnLoad() is a very useful function, and probably will appear at least once on every one of your pages. It registers a function to be called when the DOM is ready and loaded. It may seem like "an extra step", but is a necessary evil, and all toolkits have similar onLoad like functionality. The big rule here is: pass it a function, not code.for example:
dojo.addOnLoad(function(){ alert('foo'); }); will pop up an alert when dojo.js and all the dojo.require()'s have been called in. you can also pass it a function reference:var foo = function(){ alert('foo'); }; dojo.addOnLoad(foo); Pay special attention here, a very common mistake is to call dojo.addOnLoad() this way: dojo.addOnLoad(foo()); ... Which is wrong, note the extra ()'s, telling the foo function to run immediately, and pass the return value from the function foo to the addOnLoad handler. if our foo function returned a function, this would be acceptable, but here, we're just throwing an [invasive] alert. so understanding dojo.addOnLoad is an additional 10 seconds ... I have 20 more:
in 0.9, Dojo provided us some really cool methods attached to
dojo.NodeList (the full list is here). In 1.0, the FX functionality has been moved from base to core in the form of "extensions". While Alex's first post will still work as expected (forEach and fadeOut are both part of base), pulling in the dojo.NodeList-fx module provides even more magic.instead of:
dojo.query(".fadeHandle").forEach(function(n){ dojo.fadeOut( node: n ).play(); });
you can do:
dojo.require("dojo.NodeList-fx");
dojo.query(".fadeHandle").fadeOut().play();
and as an advanced example, lets fade them back in 2 seconds after they disappear:
dojo.query(".fadeHandle").fadeOut().play();
dojo.require("dojo.NodeList-fx");
dojo.query(".fadeHandle").fadeOut({
onEnd: function(){
dojo.query(".fadeHandle").fadeIn({ delay:2000 }).play();
}
}).play();
the chains: dojo.query(".fadeHandle").fadeOut({
onEnd: function(){
dojo.query(".fadeHandle").fadeIn({ delay:2000 }).play();
}
}).play();
.fadeIn, .fadeOut, .wipeIn, .wipeOut, .slideTo and the big one, .animateProperty, are all available as NodeList-fx animations. I am currently working on the experimental addon to add dojox.fx animations to the NodeList chain, which include: .highlight, .slideBy, and .sizeTo. When complete, they will extend NodeList directly, so you will simply have to dojo.require("dojox.fx.NodeList-fx"); to receive the added functionality.so that covers the remaining 20 seconds I have, and the subtle changes in NodeList / fx since 0.9.
