source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/attribute/attribute-getset.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/attribute/attribute-getset.html@5259
Revision 5259, 28.4 KB checked in by domlowe, 11 years ago (diff)

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>YUI Library Examples: Attribute Utility: Custom Getters, Setters and Validators</title>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8">
6        <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
7
8<style>
9    /*Supplemental CSS for the YUI distribution*/
10    #custom-doc { width: 95%; min-width: 950px; }
11    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
12    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
13</style>
14
15<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
16<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
17<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
18<style type="text/css">
19
20    #boxParent {
21        overflow:hidden;
22        background-color:#004c6d;
23        height:25em;
24        padding:10px;
25        margin:5px;
26    }
27
28    #boxParent .yui-box p, #attrs p {
29        margin:2px;
30    }
31
32    .attrs {
33        border:1px solid #000;
34        background-color:#cdcdcd;
35        margin:5px;
36    }
37
38    .attrs .header {
39        font-weight:bold;
40        background-color:#aaa;
41        padding:5px;
42    }
43
44    .attrs .body {
45        padding:10px;
46    }
47 
48    .attrs .body .hints {
49        font-size:85%;
50        border-bottom:1px solid #aaa;
51    }
52
53    .attrs .footer {
54        padding:5px;
55    }
56
57    .attrs label {
58        font-weight:bold;
59        display:block;
60        float:left;
61        width:4em;
62    }
63
64    .attrs .hint {
65        font-size:85%;
66        color: #004c6d;
67    }
68
69    .yui-box {
70        padding:5px;
71        border:1px solid #000;
72        width:8em;
73        height:8em;
74        text-align:center;
75        color:#000;
76    }
77
78    .yui-box .color {
79        font-family:courier;
80    }
81
82</style>
83
84</head>
85<body id="yahoo-com" class=" yui-skin-sam">
86<div id="custom-doc" class="yui-t2">
87<div id="hd">
88        <div id="ygunav">
89                <p>
90            <em>
91                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> 
92            </em>
93                </p>
94                <form action="http://search.yahoo.com/search" id="sitesearchform">
95            <input name="vs" type="hidden" value="developer.yahoo.com">
96            <input name="vs" type="hidden" value="yuiblog.com">
97                    <div id="sitesearch">
98                        <label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
99                            <input type="text" id="searchinput" name="p">
100                            <input type="submit" value="Search" id="searchsubmit" class="ygbt">
101                    </div>
102                </form>
103    </div>
104        <div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
105        <div id="pagetitle"><h1>YUI Library Examples: Attribute Utility: Custom Getters, Setters and Validators</h1></div>
106</div>
107<div id="bd">
108
109        <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
110
111        <div id="yui-main">
112                <div class="yui-b">
113                  <div class="yui-ge">
114                          <div class="yui-u first example" id="main">
115
116        <h2>Attribute Utility: Custom Getters, Setters and Validators</h2>
117
118        <div id="example" class="promo">
119        <p>
120        The <a href="attribute-basic.html">Basic Configuration</a> example shows how we can add attributes to a host class, and set up default values for them using the attribute configuration object. This example explores how you can configure <code>set</code>, <code>get</code> and <code>validator</code> functions for individual attributes, which can be used to modify or normalize attribute values during get and set invocations, and prevent invalid values from being stored.
121
122
123        </p>   
124
125        <div class="module example-container ">
126                        <div class="hd exampleHd">
127                        <p class="newWindowButton yui-skin-sam">
128                <a href="attribute-getset_clean.html" target="_blank">View example in new window.</a>
129            </p>
130                </div>          <div id="example-canvas" class="bd">
131
132               
133        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
134       
135        <div id="attrs" class="attrs">
136    <div class="header">Enter new values and click the "Set" buttons</div>
137    <div class="body">
138        <ul class="hints">
139            <li>Try entering both valid and invalid values for x, y; or values which would place the box outside it's parent.</li>
140            <li>Try entering rgb (<em>e.g. rgb(255,0,0)</em>), hex (<em>e.g. #ff0000</em>) or keyword (<em>e.g. red</em>) color values.</li>
141        </ul>
142        <p>
143            <label for="x">x:</label>
144            <input type="text" name="x" id="x" />
145            <button type="button" id="setX">Set</button>
146            <span id="xhint" class="hint"></span>
147        </p>
148        <p>
149            <label for="y">y:</label>
150            <input type="text" name="y" id="y" />
151            <button type="button" id="setY">Set</button>
152            <span id="yhint" class="hint"></span>
153        </p>
154        <p>
155            <label for="color">color:</label>
156            <input type="text" name="color" id="color" />
157            <button type="button" id="setColor">Set</button>
158        </p>
159    </div>
160    <div class="footer">
161        <button type="button" id="setXY">Set XY</button>
162        <button type="button" id="setAll">Set All</button>
163        <button type="button" id="getAll">Get All</button>
164    </div>
165</div>
166
167<div id="boxParent"></div>
168
169<script type="text/javascript">
170// Get a new YUI instance
171YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) {
172
173    // Shortcut for Y.Lang;
174    var L = Y.Lang;
175
176    var boxParent = Y.Node.get("#boxParent");
177
178    // Setup a custom class with attribute support
179    function Box(cfg) {
180        this._createNode(cfg);
181        this._initAtts(Box.ATTRIBUTES, cfg);
182    }
183
184    Box.BUFFER = 5;
185
186    // Create the box node
187    Box.prototype._createNode = function() {
188        this._node = Y.Node.create('<div class="yui-box"><p>Positioned Box</p><p class="color"></p></div>');
189        this._bind();
190
191    };
192
193    // Bind listeners for attribute change events
194    Box.prototype._bind = function() {
195
196        // Reflect any changes in xy, to the rendered Node
197        this.after("xyChange", function() {
198            this._node.setXY(this.get("xy"));
199        });
200
201        // Reflect any changes in color, to the rendered Node
202        // and output the color value received from get
203        this.after("colorChange", function(event) {
204            this._node.setStyle("backgroundColor", this.get("color"));
205            this._node.query("p.color").set("innerHTML", "(" + this.get("color") + ")");
206        });
207
208        // Append the rendered node to the parent provided
209        this.after("parentChange", function(event) {
210            var p = event.newVal;
211            p.appendChild(this._node);
212        });
213
214    };
215
216    // Get min, max unconstrained values for X
217    Box.prototype.getXConstraints = function() {
218        var parentRegion = this.get("parent").get("region");
219        return [parentRegion.left + Box.BUFFER, parentRegion.right - this._node.get("offsetWidth") - Box.BUFFER];
220    };
221
222    // Get min, max unconstrained values for Y
223    Box.prototype.getYConstraints = function() {
224        var parentRegion = this.get("parent").get("region");
225        return [parentRegion.top + Box.BUFFER, parentRegion.bottom - this._node.get("offsetHeight") - Box.BUFFER];
226    };
227
228    // Constrain the x,y value provided
229    Box.prototype.constrain = function(val) {
230
231        // If the X value places the box outside it's parent,
232        // modify it's value to place the box inside it's parent.
233
234        var xConstraints = this.getXConstraints();
235
236        if (val[0] < xConstraints[0]) {
237            val[0] = xConstraints[0];
238        } else {
239            if (val[0] > xConstraints[1]) {
240                val[0] = xConstraints[1];
241            }
242        }
243
244        // If the Y value places the box outside it's parent,
245        // modify it's value to place the box inside it's parent.
246
247        var yConstraints = this.getYConstraints();
248
249        if (val[1] < yConstraints[0]) {
250            val[1] = yConstraints[0];
251        } else {
252            if (val[1] > yConstraints[1]) {
253                val[1] = yConstraints[1];
254            }
255        }
256
257        return val;
258    };
259
260    // Setup attribute configuration
261    Box.ATTRIBUTES = {
262
263        "parent" : {
264            value: null
265        },
266
267        "x" : {
268            set: function(val) {
269                // Pass through x value to xy
270                this.set("xy", [parseInt(val), this.get("y")]);
271            },
272
273            get: function() {
274                // Get x value from xy
275                return this.get("xy")[0];
276            }
277        },
278
279        "y" : {
280            set: function(val) {
281                // Pass through y value to xy
282                this.set("xy", [this.get("x"), parseInt(val)]);
283            },
284
285            get: function() {
286                // Get y value from xy
287                return this.get("xy")[1];
288            }
289        },
290
291        "xy" : {
292            // Actual stored xy co-ordinates
293            value: [0, 0],
294
295            set: function(val) {
296                // Constrain XY value to the parent element.
297
298                // Returns the constrained xy value, which will
299                // be the final value stored.
300                return this.constrain(val);
301            },
302
303            validator: function(val) {
304                // Ensure we only store a valid data value
305                return (L.isArray(val) && val.length == 2 && L.isNumber(val[0]) && L.isNumber(val[1]));
306            }
307        },
308
309        "color" : {
310            value: "olive",
311
312            get: function(val) {
313                // Always normalize the returned value to
314                // a hex color value,  even if the stored
315                // value is a keyword, or an rgb value.
316                if (val) {
317                    return Y.Color.toHex(val);
318                } else {
319                    return null;
320                }
321            },
322
323            validator: function(val) {
324                // Ensure we only store rgb, hex or keyword values.
325                return (Y.Color.re_RGB.test(val) || Y.Color.re_hex.test(val) || Y.Color.KEYWORDS[val]); 
326            }
327        }
328    };
329
330    Y.augment(Box, Y.Attribute);
331
332    // ------
333
334    // Create a new instance of Box
335    var box = new Box({
336        parent : boxParent 
337    });
338
339    // Set references to form controls
340    var xTxt = Y.Node.get("#x");
341    var yTxt = Y.Node.get("#y");
342    var colorTxt = Y.Node.get("#color");
343
344    var xHint = Y.Node.get("#xhint");
345    var yHint = Y.Node.get("#yhint");
346
347    function getAll() {
348        xTxt.set("value", box.get("x"));
349        yTxt.set("value", box.get("y"));
350        colorTxt.set("value", box.get("color"));
351    }
352
353    // Bind DOM events for Form Controls
354
355    // Use Event Delegation for the button clicks
356    Y.on("click", function(e) {
357
358        // Get Node target from the event object
359        var targetId = e.target && e.target.get("id");
360
361        switch (targetId) {
362            case "setXY":
363                box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);
364                break;
365            case "setX":
366                box.set("x", parseInt(xTxt.get("value")));
367                break;
368            case "setY":
369                box.set("y", parseInt(yTxt.get("value")));
370                break;
371            case "setColor":
372                box.set("color", L.trim(colorTxt.get("value")));
373                break;
374            case "setAll":
375                box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);
376                box.set("color", L.trim(colorTxt.get("value")));
377                break;
378            case "getAll":
379                getAll();
380                break;
381            default:
382                break;
383        }
384
385    }, "#attrs");
386
387    // Bind listeners to provide min, max unconstrained value hints for x, y
388    // (focus/blur doesn't bubble, so bind individual listeners)
389    Y.on("focus", function() {
390        var minmax = box.getXConstraints();
391        xHint.set("innerHTML", "[" + minmax[0] + ", " + minmax[1] + "]");
392    }, xTxt);
393
394    Y.on("focus", function() {
395        var minmax = box.getYConstraints();
396        yHint.set("innerHTML", "[" + minmax[0] + ", " + minmax[1] + "]");
397    }, yTxt);
398
399    Y.on("blur", function() {
400        xHint.set("innerHTML", "");
401    }, xTxt);
402
403    Y.on("blur", function() {
404        yHint.set("innerHTML", "");
405    }, yTxt);
406
407    getAll();
408});
409</script>
410       
411        <!--END SOURCE CODE FOR EXAMPLE =============================== -->
412       
413               
414                </div>
415        </div>                 
416        </div>
417               
418        <h3>Get, Set And Validator Functions</h3>
419
420<p>Attribute lets you configure <code>get</code> and <code>set</code> functions for each attribute. These functions are invoked when the user calls Attribute's <code>get</code> and <code>set</code> methods, and provide a way to modify the value returned or the value stored respectively.</p>
421
422<p>You can also define a validator function for each attribute, which is used to validate the final value before it gets stored.</p>
423
424<h4>Creating The Box Class - The X, Y And XY Attributes</h4>
425
426<p>In this example, we'll set up a custom <code>Box</code> class representing a positionable element, with <code>x</code>, <code>y</code> and <code>xy</code> attributes.</p>
427
428<p>Only the <code>xy</code> attribute will actually store the page co-ordinate position of the box. The <code>x</code> and <code>y</code> attributes provide the user a convenient way to set only one of the co-ordinates. However we don't want to store the actual values in the <code>x</code> and <code>y</code> attributes, to avoid having to constantly sync state between all three. The <code>get</code> and <code>set</code> functions provide us with an easy way to achieve this. We'll define <code>get</code> and <code>set</code> functions for both the <code>x</code> and <code>y</code> attributes, which simply pass through to the <code>xy</code> attribute to retrieve and store values:</p>
429
430<textarea name="code" class="JScript" cols="60" rows="1">
431// Setup a custom Box class
432function Box(cfg) {
433    ...
434    this._initAtts(Box.ATTRIBUTES, cfg);
435}
436
437// Setup Box's attribute configuration
438Box.ATTRIBUTES = {
439
440    ...
441
442    "x" : {
443        set: function(val) {
444            // Pass through x value to xy
445            this.set("xy", [parseInt(val), this.get("y")]);
446        },
447
448        get: function() {
449            // Get x value from xy
450            return this.get("xy")[0];
451        }
452    },
453
454    "y" : {
455        set: function(val) {
456            // Pass through y value to xy
457            this.set("xy", [this.get("x"), parseInt(val)]);
458        },
459
460        get: function() {
461            // Get x value from xy
462            return this.get("xy")[1];
463        }
464    },
465
466    "xy" : {
467
468        // Actual stored xy co-ordinates
469        value: [0, 0],
470
471        set: function(val) {
472            // Constrain XY value to the parent element.
473
474            // Returns the constrained xy value, which will
475            // be the final value stored.
476            return this.constrain(val);
477        },
478
479        validator: function(val) {
480            // Ensure we're storing a valid data value
481            return (L.isArray(val) && val.length == 2 && L.isNumber(val[0]) && L.isNumber(val[1]));
482        }
483    },
484
485    ...
486}
487</textarea>
488
489<p>The <code>validator</code> function for <code>xy</code> ensures that only valid values finally end up being stored.</p>
490
491<p>The <code>xy</code> attribute also has a <code>set</code> function configured, which makes sure that the box is always constrained to it's parent element. The <code>constrain</code> method which it delegates to, takes the xy value the user is trying to set and returns a modified, constrained value if required. The value which is returned by the <code>set</code> handler is the value which is ultimately stored for the <code>xy</code> attribute:</p>
492
493
494<textarea name="code" class="JScript" cols="60" rows="1">
495
496    // Get min, max unconstrained values for X
497    Box.prototype.getXConstraints = function() {
498        var parentRegion = this.get("parent").get("region");
499        return [parentRegion.left + Box.BUFFER, parentRegion.right - this._node.get("offsetWidth") - Box.BUFFER];
500    };
501
502    // Get min, max unconstrained values for Y
503    Box.prototype.getYConstraints = function() {
504        var parentRegion = this.get("parent").get("region");
505        return [parentRegion.top + Box.BUFFER, parentRegion.bottom - this._node.get("offsetHeight") - Box.BUFFER];
506    };
507
508    // Constrains given x,y values
509    Box.prototype.constrain = function(val) {
510
511        // If the X value places the box outside it's parent,
512        // modify it's value to place the box inside it's parent.
513
514        var xConstraints = this.getXConstraints();
515
516        if (val[0] < xConstraints[0]) {
517            val[0] = xConstraints[0];
518        } else {
519            if (val[0] > xConstraints[1]) {
520                val[0] = xConstraints[1];
521            }
522        }
523
524        // If the Y value places the box outside it's parent,
525        // modify it's value to place the box inside it's parent.
526
527        var yConstraints = this.getYConstraints();
528
529        if (val[1] < yConstraints[0]) {
530            val[1] = yConstraints[0];
531        } else {
532            if (val[1] > yConstraints[1]) {
533                val[1] = yConstraints[1];
534            }
535        }
536
537        return val;
538    };
539
540</textarea>
541
542<p>The <code>set</code>, <code>get</code> and <code>validator</code> functions are invoked with the host object as the context, so that they can refer to the host object using "<code>this</code>", as we see in the <code>set</code> function for <code>xy</code>.</p>
543
544<h4>The Color Attribute - Normalizing Stored Values Through Get</h4>
545
546<p>The <code>Box</code> class also has a <code>color</code> attribute which also has a <code>get</code> handler and a <code>validator</code> defined:</p>
547
548<textarea name="code" class="JScript" cols="60" rows="1">
549    ...
550    "color" : {
551        value: "olive",
552
553        get: function(val) {
554            if (val) {
555                return Y.Color.toHex(val);
556            } else {
557                return null;
558            }
559        },
560
561        validator: function(val) {
562            return (Y.Color.re_RGB.test(val) || Y.Color.re_hex.test(val) || Y.Color.KEYWORDS[val]);
563        }
564    }
565    ...
566</textarea>
567
568<p>The role of the <code>get</code> handler in this case is to normalize the actual stored value of the <code>color</code> attribute, so that users always receive the hex value, regardless of the actual value stored, which maybe a color keyword (e.g. <code>"red"</code>), an rgb value (e.g.<code>rbg(255,0,0)</code>), or a hex value (<code>#ff0000</code>). The <code>validator</code> ensures the the stored value is one of these three formats.</p>
569
570<h4>Syncing Changes Using Attribute Change Events</h4>
571
572<p>Another interesting aspect of this example, is it's use of attribute change events to listen for changes to the attribute values. <code>Box</code>'s <code>_bind</code> method configures a set of attribute change event listeners which monitor changes to the <code>xy</code>, <code>color</code> and <code>parent</code> attributes and update the rendered DOM for the Box in response:</p>
573
574<textarea name="code" class="JScript" cols="60" rows="1">
575
576    // Bind listeners for attribute change events
577    Box.prototype._bind = function() {
578
579        // Reflect any changes in xy, to the rendered Node
580        this.after("xyChange", function() {
581            this._node.setXY(this.get("xy"));
582        });
583
584        // Reflect any changes in color, to the rendered Node
585        // and output the color value received from get
586        this.after("colorChange", function(event) {
587            this._node.setStyle("backgroundColor", this.get("color"));
588            this._node.query("span.color").set("innerHTML", this.get("color"));
589        });
590
591        // Append the rendered node to the parent provided
592        this.after("parentChange", function(event) {
593            var p = event.newVal;
594            p.appendChild(this._node);
595        });
596
597    }
598
599</textarea>
600
601<p>Since only <code>xy</code> stores the final co-ordinates, we don't need to monitor the <code>x</code> and <code>y</code> attributes individually for changes.</p>
602
603<h4>DOM Event Listeners</h4>
604
605<p>Although not an integral part of the example, it's worth highlighting the code which is used to setup the DOM event listeners for the form elements used by the example:</p>
606
607<textarea name="code" class="JScript" cols="60" rows="1">
608    // Set references to form controls
609    var xTxt = Y.Node.get("#x");
610    var yTxt = Y.Node.get("#y");
611    var colorTxt = Y.Node.get("#color");
612
613    // Bind DOM events for Form Controls
614
615    // Use Event Delegation for the button clicks
616    Y.on("click", function(e) {
617
618        // Get Node target from the event object
619        var targetId = e.target && e.target.get("id");
620
621        switch (targetId) {
622            case "setXY":
623                box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);
624                break;
625            case "setX":
626                box.set("x", parseInt(xTxt.get("value")));
627                break;
628            case "setY":
629                box.set("y", parseInt(yTxt.get("value")));
630                break;
631            case "setColor":
632                box.set("color", L.trim(colorTxt.get("value")));
633                break;
634            case "setAll":
635                box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);
636                box.set("color", L.trim(colorTxt.get("value")));
637                break;
638            case "getAll":
639                getAll();
640                break;
641            default:
642                break;
643        }
644
645    }, "#attrs");
646</textarea>
647
648<p>The above code uses the new 3.x <a href="../api/Event.Facade.html">Event</a> facade which normalizes cross-browser access to DOM event properties, such as <code>target</code>. We use <code>target</code> to delegate event handling for <code>click</code> events which bubble up to the <code>attrs</code> element. Note the use of selector syntax when we specify the element(s) to which we want to attach DOM listeners (e.g. <code>#attrs</code>) and the use of the <a href="../api/Node.html">Node</a> facade when dealing with references to HTML elements (e.g. <code>xTxt, yTxt, colorTxt</code>.</p>
649                                </div>
650                                <div class="yui-u sidebar">
651                                       
652                               
653                                        <div id="examples" class="mod box4">
654                        <div class="hd">
655                                                <h4>
656    Attribute Utility Examples:</h4>
657                        </div>
658                                                <div class="bd">
659                                                        <ul>
660                                                                <li><a href='../attribute/attribute-basic.html'>Basic Configuration</a></li><li><a href='../attribute/attribute-event.html'>Change Events</a></li><li class='selected'><a href='../attribute/attribute-getset.html'>Custom Getters, Setters and Validators</a></li><li><a href='../attribute/attribute-clone.html'>Value Clone Configuration</a></li><li><a href='../attribute/attribute-rw.html'>readOnly and writeOnce Configuration</a></li>                                                 </ul>
661                                                </div>
662                                        </div>
663                                       
664                                        <div class="mod box4">
665                        <div class="hd">
666                                                <h4>More Attribute Utility Resources:</h4>
667                        </div>
668                        <div class="bd">
669                                                <ul>
670                                                        <!-- <li><a href="http://developer.yahoo.com/yui/attribute/">User's Guide</a> (external)</li> -->
671                                                <li><a href="../../api/module_attribute.html">API Documentation</a></li>
672</ul>
673                        </div>
674                                        </div>
675                          </div>
676                </div>
677               
678                </div>
679        </div>
680
681
682<div class="yui-b toc3" id="tocWrapper">
683<!-- TABLE OF CONTENTS -->
684<div id="toc">
685       
686<ul>
687<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="selected "><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Base - Functional Examples" href="../../examples/base/index.html">Base</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
688</div>
689</div>
690        </div><!--closes bd-->
691
692        <div id="ft">
693        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
694        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
695            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
696            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
697            <a href="http://careers.yahoo.com/">Job Openings</a></p>
698        </div>
699</div>
700<script src="../../assets/dpSyntaxHighlighter.js"></script>
701<script language="javascript"> 
702dp.SyntaxHighlighter.HighlightAll('code'); 
703</script>
704</body>
705</html>
706<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:30 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.