1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Get Utility: Getting CSS Style Sheets</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css" id="styleoverrides">
#container .hd {
background-image:url(http://l.yimg.com/a/i/us/nt/ma/ma_nws_1.gif);
background-position:top right;
background-repeat:no-repeat;
background-color:none;
}
#container h2 {
border:none;
margin-top:0;
}
#container h3 {
color:#999999;
}
#buttonContainer {
padding-bottom:.5em;
}
#container .module {
padding:.5em 1em 1em 1em;
overflow:hidden;
}
/*
When we load the new CSS files, these files will be loaded above this style block.
If we need to override any styles supplied by the new CSS files, we can do this
here. For instance, this is useful if you are loading YUI skin files dynamically,
but want to override some of the styles.
*/
</style>
<!--end custom header content for this example-->
<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
<form action="http://search.yahoo.com/search" id="sitesearchform">
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">
<div id="sitesearch">
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
<input type="text" id="searchinput" name="p">
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
</div>
</form> </div>
<div id="ygma"><a href="../../"><img src="../../assets/yui.gif" border="0" height="38"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Get Utility: Getting CSS Style Sheets</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example">
<div class="promo">
<h1>Get Utility: Getting CSS Style Sheets</h1>
<div class="exampleIntro">
<p><a href="http://developer.yahoo.com/yui/get">The YUI Get Utility</a> can be
used to fetch CSS stylesheets after the page has loaded. This allows you to
reduce the size of your "main" stylesheet by segregating the style rules for
specific modules that may not be displayed when the page is first rendered.
Once the module is needed, you can bring in the CSS (and JavaScript)
dynamically using the Get Utility.</p>
<p>The example below demonstrates the dynamic addition and removal of three
stylesheets that change the appearance of the News module. By clicking on the
buttons (which make use of the <a
href="http://developer.yahoo.com/yui/button/">YUI Button Control</a>), you can
add/remove border, background, and font treatments for the module.
(<strong>Note:</strong> The News module itself is built using the Get Utility
to fetch JSON data from the <a
href="http://developer.yahoo.com/search/news/V1/newsSearch.html">Yahoo! News
Search web service</a>; it follows the same code pattern described in the <a
href="get-script-basic.html">"Getting a Script Node with JSON Data"</a>
example.) </p>
</div>
<div class="example-container module ">
<div class="hd exampleHd">
<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="get-css-basic_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->
</div> <div id="example-canvas" class="bd">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="container">
<div id="buttonContainer">
<!--YUI Button instances, created from script, will go here.-->
</div>
<div class="module">
<div class="hd"><h2>In the News:</h2></div>
<div class="bd" id="results">
<!--News stories will be displayed here.-->
</div>
<div class="ft">
<div id="searchControls">
<!--Use a real form that works without JavaScript:-->
<form method="GET" action="http://search.yahooapis.com/NewsSearchService/V1/newsSearch" id="newsSearch">
<label for="searchString">Search Yahoo! News:</label> <input type="text" name="p" id="searchString" value="San Francisco" size="40">
<input type="submit" id="getNewsData" value="Search Yahoo! News">
</form>
</div>
</div>
</div>
</div>
<script language="javascript">
// Encapsulating our code in a self-executing anonymous function
// is one way to create a namespace:
(function() {
// shortcuts and other variables:
var Button = YAHOO.widget.Button,
Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
Get = YAHOO.util.Get,
elContainer = Dom.get("container"),
tIds = {};
// YUI Buttons are attractive and effective for "call to action"
// tasks like the one here. We'll create buttons purely from
// JavaScript; there's no need for this style-change functionality
// to be "accessible"; in fact, it's purely cosmetic, so keeping
// these buttons out of the page's initial DOM is preferable. We'll
// use the "name" property of the button to determine what CSS to
// load when each button is clicked:
var borderButton = new Button({
id: "borderButton",
type: "checkbox",
name: "border",
label: "Border CSS",
container: "buttonContainer"
});
var backgroundButton = new Button({
id: "backgroundButton",
type: "checkbox",
name: "background",
label: "Background CSS",
container: "buttonContainer"
});
var textButton = new Button({
id: "textButton",
type: "checkbox",
name: "text",
label: "Text CSS",
container: "buttonContainer"
});
// Making available outside the anonymous function so these can be
// introspected in FireBug if desired:
YAHOO.example.buttons = [borderButton, backgroundButton, textButton];
// Checkbox buttons are either checked or unchecked; when their state
// changes, their "onCheckedChange" event fires. We'll use that
// event to trigger the loading and unloading of CSS using the Get
// Utility.
var onCheckedChange = function() {
//Which button was actuated?
var name = this.get("name");
//The button's checked state has already been updated, so if
//true we load the necessary CSS:
if(this.get("checked")) {
// We'll use the 'data' parameter to pass through the name
// of the CSS file to our onSuccess handler. This allows
// us to have access to the purge method when we want
// to remove the CSS.
//
// In addition, we use the 'insertBefore' property to specify
// the id of a style block we want to insert the new nodes
// before. By doing this, we can ensure that any style overrides
// for the dynamically loaded CSS will be applied in the correct
// order.
Get.css("../get/assets/" + name + ".css", {
data: name,
insertBefore: "styleoverrides",
onSuccess: onSuccess
});
} else {
// In onSuccess, we save a reference to the callback object
// in an associative array (tIds) indexed by the CSS name. That
// allows us here, when the CSS needs to be removed, to simply
// call the purge method corresponding to the item we want to
// remove. Purge clears all the link nodes that were created
// as part of the transaction (in this case, just a single
// link node).
tIds[this.get("name")].purge();
YAHOO.log("CSS was successfully purged; our object containing transaction ids now looks like this: " + YAHOO.lang.dump(tIds, 1), "info", "example");
// Some A-Grade browsers won't repaint automatically when CSS link nodes
// are removed. You can nudge these browsers to repaint by adding
// a blank CSS stylesheet to the page:
Get.css("../get/assets/neutral.css");
}
};
// Now we can subscribe our onCheckedChange function to each
// of our three YUI Buttons' "checkedChange" event:
borderButton.on("checkedChange", onCheckedChange);
backgroundButton.on("checkedChange", onCheckedChange);
textButton.on("checkedChange", onCheckedChange);
// As noted above, in onSuccess we want to save the callback
// object in an associative array indexed by CSS file name so that
// we can purge the link nodes later if the CSS file needs to be
// removed.
var onSuccess = function(o) {
tIds[o.data] = o;
YAHOO.log("CSS was successfully returned; our object containing transaction ids now looks like this: " + YAHOO.lang.dump(tIds, 1), "info", "example");
}
})();
</script>
<script src="../get/assets/getNews.js" type="text/javascript"></script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<h2 class="first">Using the Get Utility to Add/Remove CSS Stylesheets:</h2>
<p>In this example, clicking on the <a href="http://developer.yahoo.com/yui/button/">YUI Buttons</a> at the top of the News module adds or removes a CSS stylesheet. The stylesheets are added and purged on-demand by the <a href="http://developer.yahoo.com/yui/get/">YUI Get Utility</a>. This technique allows you defer the loading of some of your CSS style rules until after the initial page load ideally, you defer their loading until they're needed...and if they're never needed, they never need to load. There are two performance wins here: Less CSS needs to load up front, which makes the page load more quickly, and there are fewer CSS rules in play which makes the page easier for the browser to render and manipulate. In practice, you'd never want to implement this technique in a situation as simple as the one described in this example it would be much more efficient, with simple rules, to include everything on the page in the initial load. But in a more complex application, the deferred loading of some CSS can be helpful. (<strong>Note:</strong> This example also illustrates the use of the Get Utility's <code>purge</code> method for removing CSS link nodes from the page. While <code>purge</code> causes an immediate repaint in some <a href="http://developer.yahoo.com/yui/articles/gbs/">A-Grade browsers</a>, others need to be prodded to repaint. While we've illustrated one way to do this here, the use of <code>purge</code> remove stylesheets on the fly is not a light technique. Use it with discretion.)</p>
<p>This example has the following dependencies:</p>
<textarea name="code" class="HTML" cols="60" rows="1"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/get/get.js"></script></textarea>
<p>We start with a simple form on the page that will post to the <a href="http://news.search.yahoo.com/news/advanced">Yahoo! News Search engine</a>; if JavaScript is not enabled, the user will still be able to use the functionality of the News module. A placeholder is added for the YUI Buttons that we'll add via script. Those buttons do not need to be part of the page markup, because they aren't required for the core functionality of the page...they just control the CSS addition and removal, which in this case is cosmetic.</p>
<textarea name="code" class="HTML" cols="60" rows="1"><div id="container">
<div id="buttonContainer">
<!--YUI Button instances, created from script, will go here.-->
</div>
<div class="module">
<div class="hd"><h2>In the News:</h2></div>
<div class="bd" id="results">
<!--News stories will be displayed here.-->
</div>
<div class="ft">
<div id="searchControls">
<!--Use a real form that works without JavaScript:-->
<form method="GET" action="http://search.yahooapis.com/NewsSearchService/V1/newsSearch" id="newsSearch">
<label for="searchString">Search Yahoo! News:</label> <input type="text" name="p" id="searchString" value="San Francisco" size="40">
<input type="submit" id="getNewsData" value="Search Yahoo! News">
</form>
</div>
</div>
</div>
</div></textarea>
<p>With the markup in place, we can now create our YUI Buttons. We'll use Buttons of type <code>checkbox</code>; these can be clicked on or off to add/remove their corresponding CSS stylesheets. The <code>name</code> property of each Button will be used to identify the specific CSS stylesheet that the Button controls.</p>
<textarea name="code" class="JScript" cols="60" rows="1">// YUI Buttons are attractive and effective for "call to action"
// tasks like the one here. We'll create buttons purely from
// JavaScript; there's no need for this style-change functionality
// to be "accessible"; in fact, it's purely cosmetic, so keeping
// these buttons out of the page's initial DOM is preferable. We'll
// use the "name" property of the button to determine what CSS to
// load when each button is clicked:
var borderButton = new Button({
id: "borderButton",
type: "checkbox",
name: "border",
label: "Border CSS",
container: "buttonContainer"
});
var backgroundButton = new Button({
id: "backgroundButton",
type: "checkbox",
name: "background",
label: "Background CSS",
container: "buttonContainer"
});
var textButton = new Button({
id: "textButton",
type: "checkbox",
name: "text",
label: "Text CSS",
container: "buttonContainer"
});</textarea>
<p>The Get Utility is invoked when a Button's <code>checked</code> state changes; this could happen via a click or by tabbing to a Button and pressing <code>return</code> or <code>enter</code>. When that happens, the Button's <code>onCheckedChange</code> event fires. At that point, we determine whether the new button state is checked (in which case we bring in the related CSS file) or unchecked (in which case we purge the related CSS file).</p>
<textarea name="code" class="JScript" cols="60" rows="1">// Checkbox buttons are either checked or unchecked; when their state
// changes, their "onCheckedChange" event fires. We'll use that
// event to trigger the loading and unloading of CSS using the Get
// Utility.
var onCheckedChange = function() {
// Which button was actuated?
var name = this.get("name");
// The button's checked state has already been updated, so if
// true we load the necessary CSS:
if(this.get("checked")) {
// We'll use the 'data' parameter to pass through the name
// of the CSS file to our onSuccess handler. This allows
// us to have access to the purge method when we want
// to remove the CSS.
//
// In addition, we use the 'insertBefore' property to specify
// the id of a style block we want to insert the new nodes
// before. By doing this, we can assure that any style overrides
// for the dynamically loaded CSS will be applied in the correct
// order.
Get.css("../get/assets/" + name + ".css", {
data: name,
insertBefore: "styleoverrides",
onSuccess: onSuccess
});
} else {
// In onSuccess, we save a reference to the callback object
// in an associative array (tIds) indexed by the CSS name. That
// allows us here, when the CSS needs to be removed, to simply
// call the purge method corresponding to the item we want to
// remove. Purge clears all the link nodes that were created
// as part of the transaction (in this case, just a single
// link node).
tIds[this.get("name")].purge();
YAHOO.log("CSS was successfully purged; our object " +
"containing transaction ids now looks like " +
"this: " + YAHOO.lang.dump(tIds), "info", "example");
// Some A-Grade browsers won't repaint automatically when CSS link nodes
// are removed. You can nudge these browsers to repaint by adding
// a blank CSS stylesheet to the page:
Get.css("../get/assets/neutral.css");
}
};
// Now we can subscribe our onCheckedChange function to each
// of our three YUI Buttons' "checkedChange" event:
borderButton.on("checkedChange", onCheckedChange);
backgroundButton.on("checkedChange", onCheckedChange);
textButton.on("checkedChange", onCheckedChange);</textarea>
<p>In the codeblock above, we call the <code>purge</code> method to remove CSS files when Buttons are unchecked. The <code>purge</code> function is part of <a href="http://developer.yahoo.com/yui/get/#args">the callback object</a> passed to the <code>onSuccess</code> or <code>onFailure</code> handler registered with the Get Utilty when the <code>css</code> method is called. In our <code>onSuccess</code> handler, we will save that callback object in an associative array so we can access <code>purge</code> as needed when a Button is unchecked: </p>
<textarea name="code" class="JScript" cols="60" rows="1">// As noted above, in onSuccess we want to save the callback
// object in an associative array indexed by CSS file name so that
// we can purge the link nodes later if the CSS file needs to be
// removed.
var onSuccess = function(o) {
tIds[o.data] = o;
YAHOO.log("CSS was successfully returned; our object " +
"containing transaction ids now looks like " +
"this: " + YAHOO.lang.dump(tIds), "info", "example");
}
})();</textarea>
<p>The full JavaScript code for the CSS portion of this example is as follows:</p>
<textarea name="code" class="JScript" cols="60" rows="1">//Encapsulating our code in a self-executing anonymous function
// is one way to create a namespace:
(function() {
// shortcuts and other variables:
var Button = YAHOO.widget.Button,
Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
Get = YAHOO.util.Get,
elContainer = Dom.get("container"),
tIds = {};
// YUI Buttons are attractive and effective for "call to action"
// tasks like the one here. We'll create buttons purely from
// JavaScript; there's no need for this style-change functionality
// to be "accessible"; in fact, it's purely cosmetic, so keeping
// these buttons out of the page's initial DOM is preferable. We'll
// use the "name" property of the button to determine what CSS to
// load when each button is clicked:
var borderButton = new Button({
id: "borderButton",
type: "checkbox",
name: "border",
label: "Border CSS",
container: "buttonContainer"
});
var backgroundButton = new Button({
id: "backgroundButton",
type: "checkbox",
name: "background",
label: "Background CSS",
container: "buttonContainer"
});
var textButton = new Button({
id: "textButton",
type: "checkbox",
name: "text",
label: "Text CSS",
container: "buttonContainer"
});
// Making available outside the anonymous function so these can be
// introspected in FireBug if desired:
YAHOO.example.buttons = [borderButton, backgroundButton, textButton];
// Checkbox buttons are either checked or unchecked; when their state
// changes, their "onCheckedChange" event fires. We'll use that
// event to trigger the loading and unloading of CSS using the Get
// Utility.
var onCheckedChange = function() {
// Which button was actuated?
var name = this.get("name");
// The button's checked state has already been updated, so if
// true we load the necessary CSS:
if(this.get("checked")) {
// We'll use the 'data' parameter to pass through the name
// of the CSS file to our onSuccess handler. This allows
// us to have access to the purge method when we want
// to remove the CSS.
//
// In addition, we use the 'insertBefore' property to specify
// the id of a style block we want to insert the new nodes
// before. By doing this, we can assure that any style overrides
// for the dynamically loaded CSS will be applied in the correct
// order.
Get.css("../get/assets/" + name + ".css", {
data: name,
insertBefore: "styleoverrides",
onSuccess: onSuccess
});
} else {
// In onSuccess, we save a reference to the callback object
// in an associative array (tIds) indexed by the CSS name. That
// allows us here, when the CSS needs to be removed, to simply
// call the purge method corresponding to the item we want to
// remove. Purge clears all the link nodes that were created
// as part of the transaction (in this case, just a single
// link node).
tIds[this.get("name")].purge();
YAHOO.log("CSS was successfully purged; our object " +
"containing transaction ids now looks like " +
"this: " + YAHOO.lang.dump(tIds), "info", "example");
}
};
// Now we can subscribe our onCheckedChange function to each
// of our three YUI Buttons' "checkedChange" event:
borderButton.on("checkedChange", onCheckedChange);
backgroundButton.on("checkedChange", onCheckedChange);
textButton.on("checkedChange", onCheckedChange);
// As noted above, in onSuccess we want to save the callback
// object in an associative array indexed by CSS file name so that
// we can purge the link nodes later if the CSS file needs to be
// removed.
var onSuccess = function(o) {
tIds[o.data] = o;
YAHOO.log("CSS was successfully returned; our object " +
"containing transaction ids now looks like " +
"this: " + YAHOO.lang.dump(tIds), "info", "example");
}
})();</textarea>
<h2>Configuration for This Example</h2>
<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers. <a href="http://developer.yahoo.com/yui/articles/hosting/?button&dom&get&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>
</div>
<div class="yui-u">
<div id="loggerModule" class="yui-skin-sam">
<h3 class="firstContent">YUI Logger Output:</h3>
<div id="loggerDiv"></div>
</div>
<div id="examples">
<h3>Get Utility Examples:</h3>
<div id="exampleToc">
<ul>
<li><a href='../get/get-script-simple.html'>Quickstart Example: Getting a Script File with YUI Get</a></li><li><a href='../get/get-script-basic.html'>Getting a Script Node with JSON Data from a Web Service</a></li><li class='selected'><a href='../get/get-css-basic.html'>Getting CSS Style Sheets</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager)</a></li> </ul>
</div>
</div>
<div id="module">
<h3>More Get Utility Resources:</h3>
<ul>
<li><a href="http://developer.yahoo.com/yui/get/">User's Guide</a> (external)</li>
<li><a href="../../docs/module_get.html">API Documentation</a></li>
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/get.pdf">Cheat Sheet PDF</a> (external)</li></ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</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="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag & Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag & Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="selected "><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</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/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright © 2011 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<script src='../../assets/YUIexamples.js'></script>
</body>
</html>
|
