1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>dojo.NodeList-fx and dojox.fx.ext-dojo.Nodelist | fx add-ons to dojo.query()</title>
7 <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
8 <style type="text/css">
9 @import "../../../dojo/resources/dojo.css";
10 @import "../../../dijit/themes/dijit.css";
11 @import "../../../dijit/themes/tundra/tundra.css";
12 @import "../../../dijit/tests/css/dijitTests.css";
19 border-top:1px dashed #b7b7b7;
20 border-bottom:1px dashed #b7b7b7;
29 border:1px solid #b7b7b7;
30 -moz-border-radius:6pt;
31 -webkit-border-radius:5pt;
36 .rowThree { top:120px; }
37 .rowFour { top:180px; }
41 .iThree { left:120px; }
42 .iFour { left:180px; }
43 .iFive { left:240px; }
45 .iSeven { left:360px; }
48 <script type="text/javascript">
50 dojo.require("dojox.fx.ext-dojo.NodeList");
51 dojo.require("dijit.form.Button");
52 dojo.require("dijit.form.CheckBox");
55 var dQuery = dojo.query;
60 var init = function(){
61 var anim = d$(".rowOne").highlight({
64 d$(".rowTwo").fadeTo({ end: 0.5,
68 anim2 = d$(".rowThree").fadeOut({
77 dojo.connect(anim,"onEnd",function(){
80 var q1 = ".iSix"; // colum six
81 // this will setup a connection on each of the nodes to toggle their fade state
82 d$(q1).connect("onclick",function(){
83 d$(q1)[(q1v ? "fadeOut" : "fadeIn")]().play();
87 // this highlights all the nodes via a mouseenter event, which automatically
89 d$(".testBox").connect("onmouseenter",function(e){
90 dojox.fx.highlight({ node: e.target, duration:250 }).play();
94 var q3 = ".rowOne.iSeven"; // top right node
95 d$(q3).connect("onclick",function(){
97 width:300, height:300, duration:300,
99 // FIXME: sizeTo isn't calculating it's start value properly
100 d$(q3).sizeTo({ width: 50, height:50, duration:115, delay:1000, method:"combine" }).play();
112 dojo.addOnLoad(init);
114 // for our dojo.query() form, some animations take different params which would be kind of difficult
115 // to make both dynamic and robust and easy to explain. see each function individually in the API
116 // for the breakdown. just going to hard-code some values in for somet things:
118 // dojo.NodeList-fx ones:
121 borderWidth: { end: 5, unit:"px" },
122 marginTop: { end: 8, unit:"px" }
127 slideTo: { top:0, left: 0 },
129 // dojox extension ones:
140 // mix these into every 'custom query animation'
143 // onEnd: function(){ console.log('ended animation') }
151 <body class="tundra">
153 <h1 class="testTitle">NodeList and dojo.query "magic"</h1>
155 <div style="width:200px; float:right; padding:10px">
156 <h4>stuff going on:</h4>
158 <li>watch the startup cycle</li>
160 <li>click top right box</li>
161 <li>hover to highlight() node</li>
165 <div style="width:200px; float:right; padding:10px">
166 <h4>custom query:</h4>
167 <form id="whichAnim">
169 dojo.query("<input type="text" name="str" id="customStr" value=".noIdHere" size="10" />");
171 <input type="radio" name="g2" id="g2rb1" value="fadeIn" dojoType="dijit.form.RadioButton" checked="checked"/>
172 <label for="g2rb1">.fadeIn</label><br>
174 <input type="radio" name="g2" id="g2rb2" value="fadeOut" dojoType="dijit.form.RadioButton"/>
175 <label for="g2rb2">.fadeOut</label><br>
177 <input type="radio" name="g2" id="g2rb3" value="wipeOut" dojoType="dijit.form.RadioButton"/>
178 <label for="g2rb3">.wipeOut</label><br>
180 <input type="radio" name="g2" id="g2rb4" value="wipeIn" dojoType="dijit.form.RadioButton"/>
181 <label for="g2rb4">.wipeIn</label><br>
183 <input type="radio" name="g2" id="g2rb0" value="slideTo" dojoType="dijit.form.RadioButton"/>
184 <label for="g2rb0">.slideTo</label> (x: 0, y:0)<br>
188 <input type="radio" name="g2" id="g2rb5" value="highlight" dojoType="dijit.form.RadioButton"/>
189 <label for="g2rb5">.highlight</label><br>
191 <input type="radio" name="g2" id="g2rb6" value="sizeTo" dojoType="dijit.form.RadioButton"/>
192 <label for="g2rb6">.sizeTo (a fixed size)</label><br>
194 <input type="radio" name="g2" id="g2rb7" value="slideBy" dojoType="dijit.form.RadioButton"/>
195 <label for="g2rb7">.slideBy (top: left: offset fixed)</label><br>
197 <input type="radio" name="g2" id="g2rb8" value="fadeTo" dojoType="dijit.form.RadioButton"/>
198 <label for="g2rb8">.fadeTo (35% opacity)</label><br>
201 <script type="dojo/method" event="onSubmit">
202 // it's like cheating, but we don't event want this form to submit. you can type
203 // a query(), use the arrows to select a method, and hit enter. (or should be able to)
207 <button dojoType="dijit.form.Button" type="submit" id="runnerButton" />
209 <script type="dojo/method" event="onClick">
210 // our runner / submit button
211 var str = dojo.byId("customStr").value;
213 dojo.query('.dijitRadioChecked').forEach(function(n){
214 animType = dijit.byNode(n).getValue();
217 var theseArgs = animArgs[animType] || {};
218 // combine our base args with 'theseArgs' if they exist
219 var args = dojo.mixin(theseArgs,animArgs.defaultArgs)
220 //var nodelist = dojo.query(str);
221 dojo.query(str)[(animType)](args).play();
230 <div class="testBoxContainer">
231 <div id="node1" class="testBox rowOne iOne">1</div>
232 <div id="node2" class="testBox rowOne iTwo">2</div>
233 <div class="testBox noIdHere rowOne iThree">3</div>
234 <div class="testBox noIdHere rowOne iFour">4</div>
235 <div class="testBox noIdHere rowOne iFive">5</div>
236 <div class="testBox noIdHere rowOne iSix">6</div>
237 <div class="testBox noIdHere rowOne iSeven">7</div>
239 <div id="node4" class="testBox rowTwo iOne">2</div>
240 <div class="testBox noIdHere rowTwo iTwo"></div>
241 <div id="node6" class="testBox rowTwo iThree"></div>
242 <div class="testBox noIdHere rowTwo iFour"></div>
243 <div class="testBox noIdHere rowTwo iFive"></div>
244 <div class="testBox noIdHere rowTwo iSix"></div>
245 <div class="testBox noIdHere rowTwo iSeven"></div>
247 <div id="node7" class="testBox rowThree iOne">3</div>
248 <div class="testBox noIdHere rowThree iTwo"></div>
249 <div id="node9" class="testBox rowThree iThree"></div>
250 <div class="testBox noIdHere rowThree iFour"></div>
251 <div class="testBox noIdHere rowThree iFive"></div>
252 <div class="testBox noIdHere rowThree iSix"></div>
253 <div id="aNode" class="testBox rowThree iSeven"></div>
255 <div id="node7" class="testBox rowFour iOne">4</div>
256 <div class="testBox noIdHere rowFour iTwo"></div>
257 <div id="node9" class="testBox rowFour iThree"></div>
258 <div class="testBox noIdHere rowFour iFour"></div>
259 <div class="testBox noIdHere rowFour iFive"></div>
260 <div id="randomNode" class="testBox rowFour iSix"></div>
261 <div class="testBox noIdHere rowFour iSeven"></div>
265 <br style="clear:both;">
269 <h3>classes available to play with:</h3>
274 each row: .rowOne .rowTwo .rowThree .rowFour
275 each col: .iOne .iTwo .. iSeven
276 #randomNode, #node9, #node7, #aNode, #node1, #node2, #node4, #node6
279 <p>the dojo.query() isn't limited to the testDiv, it parses the body. try: dojo.query("fieldset") and slideBy animation</p>