|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Adding Node Content - Burger Builder</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 |
|
24 <h1>Example: Adding Node Content - Burger Builder</h1> |
|
25 <div class="yui3-g"> |
|
26 <div class="yui3-u-3-4"> |
|
27 <div id="main"> |
|
28 <div class="content"><div class="intro"> |
|
29 <p>This example demonstrates how to insert content when working with <code>NodeList</code> instances.</p> |
|
30 <p>Click buttons to build your burger.</p> |
|
31 </div> |
|
32 |
|
33 <div class="example"> |
|
34 <style> |
|
35 .example .demo, .example .buttons-list{ |
|
36 width: 302px; |
|
37 display: inline-block; |
|
38 zoom: 1; |
|
39 *display: inline; |
|
40 margin: 0; |
|
41 padding: 0; |
|
42 vertical-align: top; |
|
43 text-align: center; |
|
44 } |
|
45 .example .buttons-list{ |
|
46 list-style: none; |
|
47 text-align: left; |
|
48 margin-left: 100px; |
|
49 width: auto; |
|
50 height: 21em; |
|
51 } |
|
52 .example .buttons-list .yui3-button { |
|
53 margin-bottom: 0.5em; |
|
54 } |
|
55 .example .buttons-list .ketchup{ |
|
56 margin-bottom: 1em; |
|
57 } |
|
58 .example .buttons-list .another{ |
|
59 display: none; |
|
60 } |
|
61 .example .demo li { |
|
62 position: relative; |
|
63 list-style: none; |
|
64 height: 0; |
|
65 width: 302px; |
|
66 opacity: 0; |
|
67 margin: 0 0 0 -800px; |
|
68 cursor: no-drop; |
|
69 font-size: 1px; |
|
70 } |
|
71 .example .demo li img { |
|
72 position: absolute; |
|
73 top: 0; |
|
74 left: 0; |
|
75 } |
|
76 .example .demo .bun-top, .example .demo .bun-bottom{ |
|
77 opacity: 1; |
|
78 height: 106px; |
|
79 margin: 0; |
|
80 } |
|
81 </style> |
|
82 <ul class="demo"> |
|
83 <li class="bun-top"><img src="../assets/node/images/burg_bun_top.png" width="271" height="106" alt="Burger bun top"/></li> |
|
84 <li class="bun-bottom"><img src="../assets/node/images/burg_bun_bottom.png" width="291" height="115" alt="Burger bun bottom"/></li> |
|
85 </ul> |
|
86 <ul class="buttons-list"> |
|
87 <li><button class='yui3-button patty'> Patty · Before Last Bun</button></li> |
|
88 <li><button class='yui3-button lettuce'> Lettuce · Before Last Bun</button></li> |
|
89 <li><button class='yui3-button cheese' disabled="disabled"> Cheese · Before First Patty</button></li> |
|
90 <li><button class='yui3-button tomato'> Tomato · After First Bun</button></li> |
|
91 <li><button class='yui3-button onions'> Onions · After First Bun</button></li> |
|
92 <li><button class='yui3-button pickles'> Pickles · After First Bun</button></li> |
|
93 <li><button class='yui3-button ketchup'> Ketchup · After First Bun</button></li> |
|
94 <li><button class='yui3-button done'> Done</button></li> |
|
95 <li><button class='yui3-button another'> Another Please</button></li> |
|
96 </ul> |
|
97 <script> |
|
98 YUI().use('node', 'cssbutton', 'transition', 'UA', function (Y) { |
|
99 var demo = Y.one('.demo'), |
|
100 btnList = Y.all('.buttons-list .yui3-button'), |
|
101 i = 0, |
|
102 objList, |
|
103 myZIndex, |
|
104 imgPath = '../assets/node/images/'; |
|
105 |
|
106 if (Y.UA.ie && Y.UA.ie < 7) { |
|
107 |
|
108 // Add a prefix to the image file name in the imgPath. |
|
109 // This is needed to work around IE6 non-support of alpha pngs |
|
110 imgPath = imgPath + '8bit_'; |
|
111 Y.one('.example .demo .bun-top img').setAttribute('src', imgPath + 'burg_bun_top.png'); |
|
112 Y.one('.example .demo .bun-bottom img').setAttribute('src', imgPath + 'burg_bun_bottom.png'); |
|
113 } |
|
114 |
|
115 // This smoothes out the visual experience of adding |
|
116 // an element to the burger |
|
117 var transitionObject = function (obj) { |
|
118 obj.transition({ |
|
119 duration: 0.8, |
|
120 |
|
121 // height grows from initial 0, to height of contained image |
|
122 height: obj.one('img').getStyle('height'), |
|
123 marginLeft: '0px', // transition into place from offscreen left. |
|
124 opacity: { |
|
125 delay: 0.2, |
|
126 duration: 0.5, |
|
127 value: 1 |
|
128 } |
|
129 }); |
|
130 } |
|
131 |
|
132 // This removes an element of the burger |
|
133 // the height transitions to 0, it moves left, and fades out |
|
134 var removeObject = function(e) { |
|
135 e.currentTarget.transition({ |
|
136 duration: 0.8, |
|
137 height: 0, |
|
138 marginLeft: '-400px', |
|
139 opacity: { |
|
140 delay: 0.2, |
|
141 duration: 0.5, |
|
142 value: 0 |
|
143 } |
|
144 }, |
|
145 // after the transition finishes... |
|
146 function(){ |
|
147 e.currentTarget.remove(); // remove the clicked item from the DOM |
|
148 |
|
149 // If there's no patty in the burger |
|
150 if (Y.one('.example .demo').getHTML().indexOf('patty') === -1) { |
|
151 // Disable the cheese button |
|
152 // Cheese is inserted before first patty. |
|
153 // The cheese button will be enabled when there's a patty |
|
154 Y.one('.buttons-list .cheese')._node.disabled = true; |
|
155 } |
|
156 }); |
|
157 } |
|
158 |
|
159 // This inserts burger parts and manages the display of buttons |
|
160 var buttonClicks = function (e) { |
|
161 var obj; |
|
162 if (this.hasClass('patty')) { |
|
163 // Create a node with an image of the burger part |
|
164 obj = Y.Node.create('<li class="patty"><img src="' + imgPath + 'burg_patty.png" width="268" height="75" alt="Burger patty"/></li>'); |
|
165 |
|
166 // Insert it before the bottom bun |
|
167 demo.insert(obj, Y.one('.bun-bottom')); |
|
168 |
|
169 // Smooth out insert with transition |
|
170 transitionObject(obj); |
|
171 |
|
172 // Cheese button becomes available |
|
173 // only when there's a patty to insert before |
|
174 Y.one('.buttons-list .cheese')._node.disabled = false; |
|
175 } else if (this.hasClass('lettuce')) { |
|
176 obj = Y.Node.create('<li class="lettuce"><img src="' + imgPath + 'burg_lettuce.png" width="302" height="87" alt="Lettuce"/></li>'); |
|
177 demo.insert(obj, Y.one('.bun-bottom')); |
|
178 transitionObject(obj); |
|
179 } else if (this.hasClass('cheese')) { |
|
180 obj = Y.Node.create('<li class="cheese"><img src="' + imgPath + 'burg_cheese.png" width="274" height="89" alt="Cheese"/></li>'); |
|
181 demo.insert(obj, Y.one('.patty')); |
|
182 transitionObject(obj); |
|
183 } else if (this.hasClass('ketchup')) { |
|
184 obj = Y.Node.create('<li class="ketchup"><img src="' + imgPath + 'burg_ketchup.png" width="208" height="66" alt="Ketchup"/></li>'); |
|
185 Y.one('.bun-top').insert(obj, 'after'); |
|
186 transitionObject(obj); |
|
187 } else if (this.hasClass('pickles')) { |
|
188 obj = Y.Node.create('<li class="pickles"><img src="' + imgPath + 'burg_pickles.png" width="236" height="61" alt="Pickles"/></li>'); |
|
189 Y.one('.bun-top').insert(obj, 'after'); |
|
190 transitionObject(obj); |
|
191 } else if (this.hasClass('onions')) { |
|
192 obj = Y.Node.create('<li class="onions"><img src="' + imgPath + 'burg_onions.png" width="248" height="77" alt="Onions"/></li>'); |
|
193 Y.one('.bun-top').insert(obj, 'after'); |
|
194 transitionObject(obj); |
|
195 } else if (this.hasClass('tomato')) { |
|
196 obj = Y.Node.create('<li class="tomato"><img src="' + imgPath + 'burg_tomato.png" width="225" height="68" alt="Tomato slice"/></li>'); |
|
197 Y.one('.bun-top').insert(obj, 'after'); |
|
198 transitionObject(obj); |
|
199 } else if (this.hasClass('done')) { |
|
200 objList = Y.all('.demo li'); |
|
201 myZIndex = objList.size(); // for resetting z-index of burger parts |
|
202 |
|
203 // Hide all the buttons when done |
|
204 btnList.setStyle('display', 'none'); |
|
205 |
|
206 // Show the "Another Please" button |
|
207 Y.one('.buttons-list .another').setStyle('display', 'block'); |
|
208 |
|
209 // The normal z-index of <li>s in a <ul> results in the |
|
210 // bottom of the bun picture being on top |
|
211 // The z-index of the burger elements must be reversed. |
|
212 for (i = 0; i < objList.size(); i += 1) { |
|
213 objList.item(i).setStyle('zIndex', myZIndex); |
|
214 myZIndex -= 1; |
|
215 objList.item(i).setStyle('position', 'relative'); |
|
216 // transition the height of the elements proportionally smaller |
|
217 // so you could get your mouth around it |
|
218 objList.item(i).transition({ |
|
219 duration: 0.5, |
|
220 height: parseInt(objList.item(i).one('img').getStyle('height'), 10) * 0.15 + 'px' |
|
221 }); |
|
222 } |
|
223 } else if (this.hasClass('another')) { |
|
224 // Empty out the content of the burger image |
|
225 demo.setContent(''); |
|
226 |
|
227 // Insert just the buns |
|
228 demo.append('<li class="bun-top"><img src="' + imgPath + 'burg_bun_top.png" width="271" height="106" alt="Burger bun top"/></li>'); |
|
229 demo.append('<li class="bun-bottom"><img src="' + imgPath + 'burg_bun_bottom.png" width="291" height="115" alt="Burger bun bottom"/></li>'); |
|
230 |
|
231 // Disable the cheese button |
|
232 // Cheese is inserted before first patty. |
|
233 // The cheese button will be enabled when there's a patty |
|
234 Y.one('.buttons-list .cheese')._node.disabled = true; |
|
235 |
|
236 // Display all the buttons except the "Another Please" |
|
237 btnList.setStyle('display', 'block'); |
|
238 Y.one('.buttons-list .another').setStyle('display', 'none'); |
|
239 } |
|
240 } |
|
241 Y.on('click', buttonClicks, '.example .buttons-list .yui3-button'); |
|
242 Y.one('.example .demo').delegate('click', removeObject, 'li'); |
|
243 }); |
|
244 </script> |
|
245 |
|
246 </div> |
|
247 |
|
248 <h2>Setting up the NodeList</h2> |
|
249 <p>First we need some HTML to work with.</p> |
|
250 <pre class="code prettyprint"><ul class="demo"> |
|
251 <li class="bun-top"><img src="assets/images/bun_top.png"/></li> |
|
252 <li class="bun-bottom"><img src="assets/images/bun_bottom.png"/></li> |
|
253 </ul></pre> |
|
254 |
|
255 <p>Next we'll add some buttons to be clicked.</p> |
|
256 <pre class="code prettyprint"><ul class="buttons-list"> |
|
257 <li><button class='yui3-button patty'> Patty &#183; Before Last Bun</button></li> |
|
258 <li><button class='yui3-button lettuce'> Lettuce &#183; Before Last Bun</button></li> |
|
259 <li><button class='yui3-button cheese' disabled="disabled"> Cheese &#183; Before First Patty</button></li> |
|
260 <li><button class='yui3-button tomato'> Tomato &#183; After First Bun</button></li> |
|
261 <li><button class='yui3-button onions'> Onions &#183; After First Bun</button></li> |
|
262 <li><button class='yui3-button pickles'> Pickles &#183; After First Bun</button></li> |
|
263 <li><button class='yui3-button ketchup'> Ketchup &#183; After First Bun</button></li> |
|
264 <li><button class='yui3-button done'> Done</button></li> |
|
265 <li><button class='yui3-button another'> Another Please</button></li> |
|
266 </ul></pre> |
|
267 |
|
268 <h2>Adding Content</h2> |
|
269 <p>After defining some <code>var</code>s, we'll |
|
270 add a <code>buttonClicks</code> handler to run when an event is fired. |
|
271 It will add content to the <code>demo</code> node.</p> |
|
272 <p>Note that the <code>this</code> in the handler is the object that was clicked.</p> |
|
273 <pre class="code prettyprint">var demo = Y.one('.demo'), |
|
274 btnList = Y.all('.buttons-list .yui3-button'), |
|
275 ...; |
|
276 |
|
277 // This inserts burger parts and manages the display of buttons |
|
278 var buttonClicks = function (e) { |
|
279 var obj; |
|
280 if (this.hasClass('patty')) { |
|
281 // Create a node with an image of the burger part |
|
282 obj = Y.Node.create('<li class="patty"><img src="' + imgPath + 'burg_patty.png"/></li>'); |
|
283 |
|
284 // Insert it before the bottom bun |
|
285 demo.insert(obj, Y.one('.bun-bottom')); |
|
286 |
|
287 // ... |
|
288 } else if // other buttons follow...</pre> |
|
289 |
|
290 <p>The handler inserts different objects into the <code>demo</code> container object |
|
291 in different places based on these methods: |
|
292 <ul> |
|
293 <li><code>prepend</code> - as firstChild</li> |
|
294 <li><code>append</code> - as lastChild</li> |
|
295 <li><code>insert</code> - before a specified node or childNode index</li> |
|
296 </ul> |
|
297 </p> |
|
298 |
|
299 <h2>Attaching Events</h2> |
|
300 <p>We assign our handler to all of the <code>yui3-button</code> objects through |
|
301 event subscription to the matching selector.</p> |
|
302 <pre class="code prettyprint">Y.on('click', buttonClicks, '.example .buttons-list .yui3-button');</pre> |
|
303 |
|
304 <h2>Transitions</h2> |
|
305 <p>When an event handler simply inserts an object, it appears instantly, and |
|
306 other DOM objects are rendered in their new locations, which |
|
307 can be a visually jarring experience. |
|
308 </p> |
|
309 <p> |
|
310 In this example, we've added a <code>transitionObject</code> function to smooth things out. |
|
311 Inserted burger elements have an initial CSS <code>height</code> of 0. |
|
312 After each insertion, we call the <code>transitionObject</code> function, |
|
313 passing the inserted object. It begins growing to a height equal to the image |
|
314 it contains (the images are different heights). This gradually pushes open a space |
|
315 for itself, while it moves in from offscreen left, and fades in. |
|
316 </p> |
|
317 <pre class="code prettyprint">var transitionObject = function (obj) { |
|
318 obj.transition({ |
|
319 duration: 0.8, |
|
320 |
|
321 // height grows from initial 0, to height of contained image |
|
322 height: obj.one('img').getStyle('height'), |
|
323 marginLeft: '0px', // transition into place from offscreen left. |
|
324 opacity: { |
|
325 delay: 0.2, |
|
326 duration: 0.5, |
|
327 value: 1 |
|
328 } |
|
329 }); |
|
330 }</pre> |
|
331 |
|
332 <p> |
|
333 Here's more code in the <code>buttonClicks</code> handler where we call <code>transitionObject</code>, |
|
334 and do some special handling for the cheese button state. |
|
335 </p> |
|
336 <pre class="code prettyprint">// This inserts burger parts and manages the display of buttons |
|
337 var buttonClicks = function (e) { |
|
338 var obj; |
|
339 if (this.hasClass('patty')) { |
|
340 // Create a node with an image of the burger part |
|
341 obj = Y.Node.create('<li class="patty"><img src="' + imgPath + 'burg_patty.png"/></li>'); |
|
342 |
|
343 // Insert it before the bottom bun |
|
344 demo.insert(obj, Y.one('.bun-bottom')); |
|
345 |
|
346 // Smooth out insert with transition |
|
347 transitionObject(obj); |
|
348 |
|
349 // Cheese button becomes available |
|
350 // only when there's a patty to insert before |
|
351 Y.one('.buttons-list .cheese')._node.disabled = false; |
|
352 } else if // other buttons follow...</pre> |
|
353 |
|
354 <h2>Complete Example Source</h2> |
|
355 <p> |
|
356 In the complete source you'll see we also added handling for: |
|
357 <ul> |
|
358 <li>Removing elements from the burger</li> |
|
359 <li>Clicking the Done button to vertically compress the burger</li> |
|
360 <li>Requesting another</li> |
|
361 </ul> |
|
362 </p> |
|
363 <pre class="code prettyprint"><style> |
|
364 .example .demo, .example .buttons-list{ |
|
365 width: 302px; |
|
366 display: inline-block; |
|
367 zoom: 1; |
|
368 *display: inline; |
|
369 margin: 0; |
|
370 padding: 0; |
|
371 vertical-align: top; |
|
372 text-align: center; |
|
373 } |
|
374 .example .buttons-list{ |
|
375 list-style: none; |
|
376 text-align: left; |
|
377 margin-left: 100px; |
|
378 width: auto; |
|
379 height: 21em; |
|
380 } |
|
381 .example .buttons-list .yui3-button { |
|
382 margin-bottom: 0.5em; |
|
383 } |
|
384 .example .buttons-list .ketchup{ |
|
385 margin-bottom: 1em; |
|
386 } |
|
387 .example .buttons-list .another{ |
|
388 display: none; |
|
389 } |
|
390 .example .demo li { |
|
391 position: relative; |
|
392 list-style: none; |
|
393 height: 0; |
|
394 width: 302px; |
|
395 opacity: 0; |
|
396 margin: 0 0 0 -800px; |
|
397 cursor: no-drop; |
|
398 font-size: 1px; |
|
399 } |
|
400 .example .demo li img { |
|
401 position: absolute; |
|
402 top: 0; |
|
403 left: 0; |
|
404 } |
|
405 .example .demo .bun-top, .example .demo .bun-bottom{ |
|
406 opacity: 1; |
|
407 height: 106px; |
|
408 margin: 0; |
|
409 } |
|
410 </style> |
|
411 <ul class="demo"> |
|
412 <li class="bun-top"><img src="../assets/node/images/burg_bun_top.png" width="271" height="106" alt="Burger bun top"/></li> |
|
413 <li class="bun-bottom"><img src="../assets/node/images/burg_bun_bottom.png" width="291" height="115" alt="Burger bun bottom"/></li> |
|
414 </ul> |
|
415 <ul class="buttons-list"> |
|
416 <li><button class='yui3-button patty'> Patty &#183; Before Last Bun</button></li> |
|
417 <li><button class='yui3-button lettuce'> Lettuce &#183; Before Last Bun</button></li> |
|
418 <li><button class='yui3-button cheese' disabled="disabled"> Cheese &#183; Before First Patty</button></li> |
|
419 <li><button class='yui3-button tomato'> Tomato &#183; After First Bun</button></li> |
|
420 <li><button class='yui3-button onions'> Onions &#183; After First Bun</button></li> |
|
421 <li><button class='yui3-button pickles'> Pickles &#183; After First Bun</button></li> |
|
422 <li><button class='yui3-button ketchup'> Ketchup &#183; After First Bun</button></li> |
|
423 <li><button class='yui3-button done'> Done</button></li> |
|
424 <li><button class='yui3-button another'> Another Please</button></li> |
|
425 </ul> |
|
426 <script> |
|
427 YUI().use('node', 'cssbutton', 'transition', 'UA', function (Y) { |
|
428 var demo = Y.one('.demo'), |
|
429 btnList = Y.all('.buttons-list .yui3-button'), |
|
430 i = 0, |
|
431 objList, |
|
432 myZIndex, |
|
433 imgPath = '../assets/node/images/'; |
|
434 |
|
435 if (Y.UA.ie && Y.UA.ie < 7) { |
|
436 |
|
437 // Add a prefix to the image file name in the imgPath. |
|
438 // This is needed to work around IE6 non-support of alpha pngs |
|
439 imgPath = imgPath + '8bit_'; |
|
440 Y.one('.example .demo .bun-top img').setAttribute('src', imgPath + 'burg_bun_top.png'); |
|
441 Y.one('.example .demo .bun-bottom img').setAttribute('src', imgPath + 'burg_bun_bottom.png'); |
|
442 } |
|
443 |
|
444 // This smoothes out the visual experience of adding |
|
445 // an element to the burger |
|
446 var transitionObject = function (obj) { |
|
447 obj.transition({ |
|
448 duration: 0.8, |
|
449 |
|
450 // height grows from initial 0, to height of contained image |
|
451 height: obj.one('img').getStyle('height'), |
|
452 marginLeft: '0px', // transition into place from offscreen left. |
|
453 opacity: { |
|
454 delay: 0.2, |
|
455 duration: 0.5, |
|
456 value: 1 |
|
457 } |
|
458 }); |
|
459 } |
|
460 |
|
461 // This removes an element of the burger |
|
462 // the height transitions to 0, it moves left, and fades out |
|
463 var removeObject = function(e) { |
|
464 e.currentTarget.transition({ |
|
465 duration: 0.8, |
|
466 height: 0, |
|
467 marginLeft: '-400px', |
|
468 opacity: { |
|
469 delay: 0.2, |
|
470 duration: 0.5, |
|
471 value: 0 |
|
472 } |
|
473 }, |
|
474 // after the transition finishes... |
|
475 function(){ |
|
476 e.currentTarget.remove(); // remove the clicked item from the DOM |
|
477 |
|
478 // If there's no patty in the burger |
|
479 if (Y.one('.example .demo').getHTML().indexOf('patty') === -1) { |
|
480 // Disable the cheese button |
|
481 // Cheese is inserted before first patty. |
|
482 // The cheese button will be enabled when there's a patty |
|
483 Y.one('.buttons-list .cheese')._node.disabled = true; |
|
484 } |
|
485 }); |
|
486 } |
|
487 |
|
488 // This inserts burger parts and manages the display of buttons |
|
489 var buttonClicks = function (e) { |
|
490 var obj; |
|
491 if (this.hasClass('patty')) { |
|
492 // Create a node with an image of the burger part |
|
493 obj = Y.Node.create('<li class="patty"><img src="' + imgPath + 'burg_patty.png" width="268" height="75" alt="Burger patty"/></li>'); |
|
494 |
|
495 // Insert it before the bottom bun |
|
496 demo.insert(obj, Y.one('.bun-bottom')); |
|
497 |
|
498 // Smooth out insert with transition |
|
499 transitionObject(obj); |
|
500 |
|
501 // Cheese button becomes available |
|
502 // only when there's a patty to insert before |
|
503 Y.one('.buttons-list .cheese')._node.disabled = false; |
|
504 } else if (this.hasClass('lettuce')) { |
|
505 obj = Y.Node.create('<li class="lettuce"><img src="' + imgPath + 'burg_lettuce.png" width="302" height="87" alt="Lettuce"/></li>'); |
|
506 demo.insert(obj, Y.one('.bun-bottom')); |
|
507 transitionObject(obj); |
|
508 } else if (this.hasClass('cheese')) { |
|
509 obj = Y.Node.create('<li class="cheese"><img src="' + imgPath + 'burg_cheese.png" width="274" height="89" alt="Cheese"/></li>'); |
|
510 demo.insert(obj, Y.one('.patty')); |
|
511 transitionObject(obj); |
|
512 } else if (this.hasClass('ketchup')) { |
|
513 obj = Y.Node.create('<li class="ketchup"><img src="' + imgPath + 'burg_ketchup.png" width="208" height="66" alt="Ketchup"/></li>'); |
|
514 Y.one('.bun-top').insert(obj, 'after'); |
|
515 transitionObject(obj); |
|
516 } else if (this.hasClass('pickles')) { |
|
517 obj = Y.Node.create('<li class="pickles"><img src="' + imgPath + 'burg_pickles.png" width="236" height="61" alt="Pickles"/></li>'); |
|
518 Y.one('.bun-top').insert(obj, 'after'); |
|
519 transitionObject(obj); |
|
520 } else if (this.hasClass('onions')) { |
|
521 obj = Y.Node.create('<li class="onions"><img src="' + imgPath + 'burg_onions.png" width="248" height="77" alt="Onions"/></li>'); |
|
522 Y.one('.bun-top').insert(obj, 'after'); |
|
523 transitionObject(obj); |
|
524 } else if (this.hasClass('tomato')) { |
|
525 obj = Y.Node.create('<li class="tomato"><img src="' + imgPath + 'burg_tomato.png" width="225" height="68" alt="Tomato slice"/></li>'); |
|
526 Y.one('.bun-top').insert(obj, 'after'); |
|
527 transitionObject(obj); |
|
528 } else if (this.hasClass('done')) { |
|
529 objList = Y.all('.demo li'); |
|
530 myZIndex = objList.size(); // for resetting z-index of burger parts |
|
531 |
|
532 // Hide all the buttons when done |
|
533 btnList.setStyle('display', 'none'); |
|
534 |
|
535 // Show the "Another Please" button |
|
536 Y.one('.buttons-list .another').setStyle('display', 'block'); |
|
537 |
|
538 // The normal z-index of <li>s in a <ul> results in the |
|
539 // bottom of the bun picture being on top |
|
540 // The z-index of the burger elements must be reversed. |
|
541 for (i = 0; i < objList.size(); i += 1) { |
|
542 objList.item(i).setStyle('zIndex', myZIndex); |
|
543 myZIndex -= 1; |
|
544 objList.item(i).setStyle('position', 'relative'); |
|
545 // transition the height of the elements proportionally smaller |
|
546 // so you could get your mouth around it |
|
547 objList.item(i).transition({ |
|
548 duration: 0.5, |
|
549 height: parseInt(objList.item(i).one('img').getStyle('height'), 10) * 0.15 + 'px' |
|
550 }); |
|
551 } |
|
552 } else if (this.hasClass('another')) { |
|
553 // Empty out the content of the burger image |
|
554 demo.setContent(''); |
|
555 |
|
556 // Insert just the buns |
|
557 demo.append('<li class="bun-top"><img src="' + imgPath + 'burg_bun_top.png" width="271" height="106" alt="Burger bun top"/></li>'); |
|
558 demo.append('<li class="bun-bottom"><img src="' + imgPath + 'burg_bun_bottom.png" width="291" height="115" alt="Burger bun bottom"/></li>'); |
|
559 |
|
560 // Disable the cheese button |
|
561 // Cheese is inserted before first patty. |
|
562 // The cheese button will be enabled when there's a patty |
|
563 Y.one('.buttons-list .cheese')._node.disabled = true; |
|
564 |
|
565 // Display all the buttons except the "Another Please" |
|
566 btnList.setStyle('display', 'block'); |
|
567 Y.one('.buttons-list .another').setStyle('display', 'none'); |
|
568 } |
|
569 } |
|
570 Y.on('click', buttonClicks, '.example .buttons-list .yui3-button'); |
|
571 Y.one('.example .demo').delegate('click', removeObject, 'li'); |
|
572 }); |
|
573 </script></pre> |
|
574 |
|
575 </div> |
|
576 </div> |
|
577 </div> |
|
578 |
|
579 <div class="yui3-u-1-4"> |
|
580 <div class="sidebar"> |
|
581 |
|
582 |
|
583 |
|
584 <div class="sidebox"> |
|
585 <div class="hd"> |
|
586 <h2 class="no-toc">Examples</h2> |
|
587 </div> |
|
588 |
|
589 <div class="bd"> |
|
590 <ul class="examples"> |
|
591 |
|
592 |
|
593 <li data-description="Using selectors and property accessors with Node."> |
|
594 <a href="properties.html">Set and Get Properties</a> |
|
595 </li> |
|
596 |
|
597 |
|
598 |
|
599 <li data-description="Using DOM methods with Node."> |
|
600 <a href="dom-node.html">DOM Methods</a> |
|
601 </li> |
|
602 |
|
603 |
|
604 |
|
605 <li data-description="Building a simple store and shopping cart."> |
|
606 <a href="store.html">DOM Methods - Store</a> |
|
607 </li> |
|
608 |
|
609 |
|
610 |
|
611 <li data-description="Listening for DOM events with Node instances."> |
|
612 <a href="events.html">Handling DOM Events</a> |
|
613 </li> |
|
614 |
|
615 |
|
616 |
|
617 <li data-description="NodeList provides Node functionality for manipulating multiple nodes at once."> |
|
618 <a href="nodelist.html">Using NodeList - Simple</a> |
|
619 </li> |
|
620 |
|
621 |
|
622 |
|
623 <li data-description="How to use multiple NodeList features to build a simple game."> |
|
624 <a href="ducks.html">Using NodeList - Ducks Game</a> |
|
625 </li> |
|
626 |
|
627 |
|
628 |
|
629 <li data-description="Using a single event listener to handle events on multiple nodes."> |
|
630 <a href="node-evt-delegation.html">Delegating Node Events</a> |
|
631 </li> |
|
632 |
|
633 |
|
634 |
|
635 <li data-description="This example demonstrates how to position an element in page coordinates."> |
|
636 <a href="node-xy.html">Node Positioning</a> |
|
637 </li> |
|
638 |
|
639 |
|
640 |
|
641 <li data-description="This example demonstrates how to set styles and get style information."> |
|
642 <a href="node-style.html">Node Styling</a> |
|
643 </li> |
|
644 |
|
645 |
|
646 |
|
647 <li data-description="This example demonstrates how to insert content into a Node."> |
|
648 <a href="node-insert.html">Adding Node Content - Burger Builder</a> |
|
649 </li> |
|
650 |
|
651 |
|
652 |
|
653 <li data-description="This example demonstrates how to show and hide a Node."> |
|
654 <a href="node-view.html">Showing and Hiding</a> |
|
655 </li> |
|
656 |
|
657 |
|
658 |
|
659 |
|
660 |
|
661 |
|
662 |
|
663 |
|
664 |
|
665 |
|
666 |
|
667 |
|
668 |
|
669 |
|
670 |
|
671 |
|
672 </ul> |
|
673 </div> |
|
674 </div> |
|
675 |
|
676 |
|
677 |
|
678 <div class="sidebox"> |
|
679 <div class="hd"> |
|
680 <h2 class="no-toc">Examples That Use This Component</h2> |
|
681 </div> |
|
682 |
|
683 <div class="bd"> |
|
684 <ul class="examples"> |
|
685 |
|
686 |
|
687 |
|
688 |
|
689 |
|
690 |
|
691 |
|
692 |
|
693 |
|
694 |
|
695 |
|
696 |
|
697 |
|
698 |
|
699 |
|
700 |
|
701 |
|
702 |
|
703 |
|
704 |
|
705 |
|
706 |
|
707 |
|
708 |
|
709 <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States."> |
|
710 <a href="../node-focusmanager/node-focusmanager-toolbar.html">Accessible Toolbar</a> |
|
711 </li> |
|
712 |
|
713 |
|
714 |
|
715 <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States."> |
|
716 <a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
717 </li> |
|
718 |
|
719 |
|
720 |
|
721 <li data-description="Use the Event Utility to attach simple DOM event handlers."> |
|
722 <a href="../event/basic-example.html">Simple DOM Events</a> |
|
723 </li> |
|
724 |
|
725 |
|
726 |
|
727 <li data-description="Example Photo Browser application."> |
|
728 <a href="../dd/photo-browser.html">Photo Browser</a> |
|
729 </li> |
|
730 |
|
731 |
|
732 |
|
733 <li data-description="Portal style example using Drag & Drop Event Bubbling and Animation."> |
|
734 <a href="../dd/portal-drag.html">Portal Style Example</a> |
|
735 </li> |
|
736 |
|
737 |
|
738 |
|
739 <li data-description="Use IO to request XML data from a remote web service."> |
|
740 <a href="../io/weather.html">Request XML data from Yahoo! Weather</a> |
|
741 </li> |
|
742 |
|
743 |
|
744 |
|
745 <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources."> |
|
746 <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a> |
|
747 </li> |
|
748 |
|
749 |
|
750 </ul> |
|
751 </div> |
|
752 </div> |
|
753 |
|
754 </div> |
|
755 </div> |
|
756 </div> |
|
757 </div> |
|
758 |
|
759 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
760 <script>prettyPrint();</script> |
|
761 |
|
762 <script> |
|
763 YUI.Env.Tests = { |
|
764 examples: [], |
|
765 project: '../assets', |
|
766 assets: '../assets/node', |
|
767 name: 'node-insert', |
|
768 title: 'Adding Node Content - Burger Builder', |
|
769 newWindow: '', |
|
770 auto: false |
|
771 }; |
|
772 YUI.Env.Tests.examples.push('properties'); |
|
773 YUI.Env.Tests.examples.push('dom-node'); |
|
774 YUI.Env.Tests.examples.push('store'); |
|
775 YUI.Env.Tests.examples.push('events'); |
|
776 YUI.Env.Tests.examples.push('nodelist'); |
|
777 YUI.Env.Tests.examples.push('ducks'); |
|
778 YUI.Env.Tests.examples.push('node-evt-delegation'); |
|
779 YUI.Env.Tests.examples.push('node-xy'); |
|
780 YUI.Env.Tests.examples.push('node-style'); |
|
781 YUI.Env.Tests.examples.push('node-insert'); |
|
782 YUI.Env.Tests.examples.push('node-view'); |
|
783 YUI.Env.Tests.examples.push('node-focusmanager-toolbar'); |
|
784 YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
785 YUI.Env.Tests.examples.push('basic-example'); |
|
786 YUI.Env.Tests.examples.push('photo-browser'); |
|
787 YUI.Env.Tests.examples.push('portal-drag'); |
|
788 YUI.Env.Tests.examples.push('weather'); |
|
789 YUI.Env.Tests.examples.push('xdr'); |
|
790 |
|
791 </script> |
|
792 <script src="../assets/yui/test-runner.js"></script> |
|
793 |
|
794 |
|
795 |
|
796 </body> |
|
797 </html> |