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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The Yahoo! User Interface Library (YUI)</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>
<style type='text/css'>
#components:after {content:'.';visibility:hidden;clear:both;height:0;display:block;}
#components {zoom:1;}
</style>
<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="">
<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>The Yahoo! User Interface Library (YUI)</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<h1 class="first-content">Welcome to the Yahoo! User Interface Library (YUI)</h1>
<p>Thanks for downloading the YUI Library of JavaScript and CSS components. The files you've downloaded contain all of the source code for YUI (in the <a href="build/"><code>/build</code></a> directory) as well as <a href="#examples">functional examples</a> for each component. They also contain documentation in the form of <a href="docs/index.html">API docs</a>. <a href="http://developer.yahoo.com/yui/docs/assets/cheatsheets.zip">PDF cheatsheets for most components are available as an external download</a>.</p>
<h3>Getting Started:</h3>
<ol>
<li><strong>Check out the examples of YUI in action. </strong>We recommend starting with the <a href="examples/event/index.html">Event Utility</a> and <a href="examples/dom/index.html">Dom Collection</a> examples; Event and Dom provide an important foundation for JavaScript developers using YUI. Once you've reviewed those two foundational pieces, go on to explore utilities like <a href="examples/dragdrop/index.html">Drag and Drop</a> and <a href="examples/animation/index.html">Animation</a> or UI controls like <a href="examples/button/index.html">Button</a>, <a href="examples/calendar/index.html">Calendar</a> and <a href="examples/tabview/index.html">TabView</a>. If you're interested in YUI's CSS components, read through the examples for <a href="examples/reset/index.html">Reset</a>, <a href="examples/base/index.html">Base</a>, <a href="examples/fonts/index.html">Fonts</a>, and <a href="examples/grids/index.html">Grids</a> in that order.</li>
<li><strong>Remember that there are full user's guides</strong> for each component on the <a href="http://developer.yahoo.com/yui/">YUI website</a> (external link). If you have any questions about a component as you play with the examples, check out the component's user's guide or the <a href="docs/index.html">searchable API documentation</a>.</li>
<li><strong>Remember that you can download <a href="http://developer.yahoo.com/yui/docs/assets/cheatsheets.zip">cheat sheets (external)</a></strong> for most YUI components. These one- or two-page printable PDFs make for a good starting point as you explore the various aspects of YUI. </li>
<li><strong>Start building.</strong> You can include YUI scripts and CSS from this distribution (in the <code><a href="build/">/build</a></code> directory) or <a href="http://developer.yahoo.com/yui/articles/hosting/">directly from Yahoo! servers</a>. <a href="http://developer.yahoo.com/yui/yuiloader/">The YUI Loader Utility</a> is a client-side loading package that can dynamically pull in YUI scripts as needed, whether from your servers or from ours.</li>
<li><strong>Become a member of the YUI community.</strong> YUI developers and implementers share thoughts and solutions and provide a helping hand <a href="http://yuilibrary.com/forum/">in our forums on YUILibrary.com</a> (external link). YUI developers also contribute to <a href="http://yuiblog.com/">the YUIBlog</a>, where you'll find in-depth articles, videos and other great content about YUI and the world of frontend engineering. </li>
</ol>
<h2 id="examples">YUI Functional Examples Included with This Download:</h2>
<p>Along with the source code for YUI, your download includes <a href="examples/index.html">342 functional examples and tutorials</a> that demonstrate each component in action. Use the list below or the menu at left to review these YUI demos — they're the best way to get oriented to what YUI can do and to grab sample code that can help you get started. Remember that these examples and more, in addition to user's guides for each YUI component, can also be found on the <a href="http://developer.yahoo.com/yui/">YUI website</a> (external link). (<strong>Note:</strong> Almost all examples in this distribution will work if you are browsing them from your filesystem, but some examples included here do need to be deployed on a PHP-enabled http server to function properly; if you don't have access to such a setup, just check out those examples <a href="http://developer.yahoo.com/yui/">on our website</a> to see how they work.)</p>
</div>
<!--stacked three-column grid-->
<div class="yui-gb" id="components">
<div class="yui-u first">
<h3>CSS:</h3>
<ul>
<li><a href='examples/reset/index.html'>Reset CSS</a></li>
<li><a href='examples/base/index.html'>Base CSS</a></li>
<li><a href='examples/fonts/index.html'>Fonts CSS</a></li>
<li><a href='examples/grids/index.html'>Grids CSS</a></li>
</ul>
<h3>Developer Tools:</h3>
<ul>
<li><a href='examples/logger/index.html'>Logger Control</a></li>
<li><a href='examples/profiler/index.html'>Profiler</a></li>
<li><a href='examples/profilerviewer/index.html'>ProfilerViewer Control</a></li>
<li><a href='examples/yuitest/index.html'>YUI Test Utility</a></li>
</ul>
</div>
<div class="yui-u">
<h3>YUI Core:</h3>
<ul>
<li><a href="examples/yahoo/index.html">YAHOO Global Object</a> (including language and environment utilities)</li>
<li><a href="examples/dom/index.html">Dom Collection</a> (including helper methods for class managment, positioning, and more)</li>
<li><a href="examples/event/index.html">Event Utility</a> (including support for cross-browser DOM events and Custom Events)</li>
</ul>
<h3>Utilities:</h3>
<ul>
<li><a href='examples/animation/index.html'>Animation Utility</a></li>
<li><a href='examples/history/index.html'>Browser History Manager</a></li>
<li><a href='examples/connection/index.html'>Connection Manager</a></li>
<li><a href='examples/cookie/index.html'>Cookie Utility</a></li>
<li><a href='examples/datasource/index.html'>DataSource Utility</a></li>
<li><a href='examples/dragdrop/index.html'>Drag & Drop</a></li>
<li><a href='examples/get/index.html'>Get Utility</a></li>
<li><a href='examples/imageloader/index.html'>ImageLoader Utility</a></li>
<li><a href='examples/json/index.html'>JSON Utility</a></li>
<li><a href='examples/resize/index.html'>Resize Utility</a></li>
<li><a href='examples/swf/index.html'>SWF Utility</a></li>
<li><a href='examples/swfstore/index.html'>SWFStore Utility</a></li>
<li><a href='examples/selector/index.html'>Selector Utility</a></li>
<li><a href='examples/storage/index.html'>Storage Utility</a></li>
<li><a href='examples/stylesheet/index.html'>StyleSheet Utility</a></li>
<li><a href='examples/yuiloader/index.html'>YUI Loader Utility</a></li>
</ul>
</div>
<div class="yui-u">
<h3>UI Controls/Widgets:</h3>
<ul>
<li><a href='examples/autocomplete/index.html'>AutoComplete Control</a></li>
<li><a href='examples/button/index.html'>Button Control</a></li>
<li><a href='examples/calendar/index.html'>Calendar Control</a></li>
<li><a href='examples/carousel/index.html'>Carousel Control</a></li>
<li><a href='examples/charts/index.html'>Charts Control</a></li>
<li><a href='examples/colorpicker/index.html'>Color Picker Control</a></li>
<li><a href='examples/container/index.html'>Container Family</a></li>
<li><a href='examples/datatable/index.html'>DataTable Control</a></li>
<li><a href='examples/imagecropper/index.html'>ImageCropper Control</a></li>
<li><a href='examples/layout/index.html'>Layout Manager</a></li>
<li><a href='examples/menu/index.html'>Menu Family</a></li>
<li><a href='examples/paginator/index.html'>Paginator</a></li>
<li><a href='examples/progressbar/index.html'>ProgressBar Control</a></li>
<li><a href='examples/editor/index.html'>Rich Text Editor</a></li>
<li><a href='examples/slider/index.html'>Slider Control</a></li>
<li><a href='examples/tabview/index.html'>TabView Control</a></li>
<li><a href='examples/treeview/index.html'>TreeView Control</a></li>
<li><a href='examples/uploader/index.html'>Uploader Control</a></li>
</ul>
</div>
</div>
<div class="yui-g">
<h2>More from the YUI Project:</h2>
<p>The YUI Project also includes the YUI Compressor, a safe and powerful server-side JavaScript/CSS minifier. We use YUI Compressor to pack the YUI Library's <code>-min</code> files, and you can use it on your own files as well. <a href="http://developer.yahoo.com/yui/compressor/">Check out the YUI Compressor page on the YUI website</a>.</p>
</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="item"><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>
</body>
</html>
|
