Welcome to YUI 3.10.3!
+ ++YUI is a set of utilities, infrastructure components, and widgets written in JavaScript and CSS for building richly interactive web applications. It is available under a BSD license and is free for all uses. +
+ ++This is the static documentation for YUI 3.10.3. For the most up-to-date, searchable docs, please visit the YUI website. +
+ +Links
+ +-
+
- Quick Start (for developers new to YUI) +
- Latest Online Documentation +
- Latest Production Release +
- Forums +
- License +
- How to Contribute +
Directory Contents
+ ++This package contains the following directories: +
+ +-
+
api: Generated API docs for the entire library in HTML format.
+
+ build: Built YUI source files. This is what you should load on your web pages. The built files are generated at development time from the contents of thesrcdirectory. The build step generates debug files (unminified and with full comments and logging), raw files (unminified, but without debug logging), and minified files (suitable for production deployment and use).
+
+ docs: User guides and examples for YUI components.
+
+ srcRaw unbuilt source code (JavaScript, CSS, image assets, ActionScript files, etc.) for the library.
+
To build YUI components install Shifter (npm -g install shifter)
+and then simply run shifter in that components directory.
Shifter also allows you to rebuild the entire YUI src tree:
+cd yui3/src && shifter --walk+ + + +
+
+
+
+ Component User Guides
+ +-
+
+
+
- Anim + + + +
- App Framework + + + +
- AsyncQueue + + + +
- Attribute + + + +
- AutoComplete + + + +
- Base + + + +
- Button + + + +
- Cache + + + +
- Calendar + + + +
- Charts + + + +
- Color + + + +
- Console + + + +
- ConsoleFilters Plugin + + + +
- Cookie Utility + + + +
- CSS Base + + + +
- CSS Fonts + + + +
- CSS Grids + + + +
- CSS Reset + + + +
- DataSchema + + + +
- DataSource + + + +
- DataTable + + + +
- DataType + + + +
- Dial + + + +
- Drag and Drop + + + +
- Event + + + +
- EventTarget + + + +
- FocusManager Node Plugin + + + +
- Get + + + +
- Graphics + + + +
- Handlebars + + + +
- History + + + +
- ImageLoader + + + +
- Internationalization + + + +
- IO Utility + + + +
- JSON + + + +
- JSONP + + + +
- MenuNav Node Plugin + + + +
- Model + + + +
- Model List + + + +
- Node + + + +
- Normalize.css + + + +
- Overlay + + + +
- Panel + + + +
- Pjax + + + +
- Plugin + + + +
- Promise + + + +
- Recordset + + + +
- Resize + + + +
- Rich Text Editor + + + +
- Router + + + +
- ScrollView + + + +
- Slider + + + +
- Sortable + + + +
- StyleSheet + + + +
- SWF Utility + + + +
- TabView + + + +
- Template + + + +
- Test + + + +
- Test Console + + + +
- Transition + + + +
- Tree + + + +
- Uploader + + + +
- View + + + +
- Widget + + + +
- YQL Query + + + +
- YUI Global Object + + +
+
+Examples list
+-
+
+
+
- Anim
+
-
+
+
- Basic Animation + + + +
- Easing Effects + + + +
- Animating Colors + + + +
- Alternating Iterations + + + +
- Animating XY Position + + + +
- Animating Along a Curved Path + + + +
- Reversing an Animation + + + +
- Using the End Event + + + +
- Multiple Instances + + * + + + +
- Animation Plugin + + * + + + +
- Animated Drop Targets + + * + + + +
+
+
+
+ - App Framework
+
-
+
+
- Todo List + + + +
- GitHub Contributors + + + +
+
+
+
+ - AsyncQueue
+
-
+
+
- Building a UI with AsyncQueue + + + +
+
+
+
+ - Attribute
+
-
+
+
- Basic Attribute Configuration + + + +
- Read-Only and Write-Once Attributes + + + +
- Attribute Change Events + + + +
- Attribute Based Speed Dating + + + +
- Attribute Event Based Speed Dating + + + +
- Attribute Getters, Setters and Validators + + + +
+
+
+
+ - AutoComplete
+
-
+
+
- Basic Local Data + + + +
- Remote Data via JSONP + + + +
- Remote Data via YQL + + + +
- Remote Data via DataSource + + + +
- Tag Completion Using Query Delimiters + + + +
- Find Photos on Flickr (Custom Formatting, YQL Source) + + + +
- Filter a Set of Existing Items on a Page + + + +
- Address Completion on Google's Geocoding Service + + + +
+
+
+
+ - Base
+
-
+
+
- Creating Custom Widget Classes With Extensions + + * + + + +
- Creating a Simple Tooltip Widget With Extensions + + * + + + +
- Creating a Hierarchical ListBox Widget + + * + + + +
+
+
+
+ - Button
+
-
+
+
- Styling elements with cssbutton + + + +
- Enhancing <button> nodes with button-plugin + + + +
- Basic button widgets + + + +
- Managing groups of buttons with button-group + + + +
+
+
+
+ - Cache
+
-
+
+
- Basic Caching + + + +
- Offline Caching + + + +
- DataSource with Caching + + * + + + +
- DataSource with Offline Cache + + * + + + +
+
+
+
+ - Calendar + + + + + +
- Charts
+
-
+
+
- Basic Charts Implementation + + + +
- Chart with Multiple Series + + + +
- Specify Chart Type + + + +
- Create Stacked Chart + + + +
- Create a Chart with a Time Axis + + + +
- Add Gridlines to a Chart + + + +
- Create a Stacked Area Chart with Planar Based Events + + + +
- Customize a Chart + + + +
- Customize a Chart's Tooltip + + + +
- Define a Chart's Axes and Series + + + +
- Pie Chart + + + +
- Dual Axes Chart + + + +
- Update Chart Axis + + + +
- Update Chart Series + + + +
- Create Chart with a Legend + + + +
- Group Marker Chart + + + +
+
+
+
+ - Color
+
-
+
+
- RGB Slider + + + +
- HSL Color Picker + + + +
- HSL Harmony + + + +
+
+
+
+ - Console
+
-
+
+
- Creating a Console for Debugging + + + +
- YUI Configuration to Filter Log Messages + + + +
- Creating a Universal Console + + + +
- Using the ConsoleFilters Plugin + + * + + + +
+
+
+
+ - ConsoleFilters Plugin
+
-
+
+
- Using the ConsoleFilters Plugin + + + +
- Creating a Console for Debugging + + * + + + +
+
+
+
+ - Cookie Utility
+
-
+
+
- Simple Cookie Example + + + +
- Advanced Cookie Example + + + +
- Subcookie Example + + + +
+
+
+
+ - CSS Base
+
-
+
+
- Global (Page-Level) Example + + + +
- Contextual Example + + + +
- Global (Page-Level) Example + + * + + + +
- Contextual Example + + * + + + +
+
+
+
+ - CSS Fonts
+
-
+
+
- Global (Page-Level) Example + + + +
- Contextual Example + + + +
- Setting Font Size + + + +
+
+
+
+ - CSS Grids
+
-
+
+
- Using Grid Units + + + +
- Fixed Page Template + + + +
- Fluid Page Template + + + +
- Aligning Grid Units + + + +
- Responsive Newspaper Layout + + + +
- Basic Left Nav + + * + + + +
- Basic Top Nav + + * + + + +
- Menu Button Top Nav + + * + + + +
- Split Button Top Nav + + * + + + +
- Left Nav with Submenus with Shadows + + * + + + +
- Left Nav With Submenus With Rounded Corners + + * + + + +
- Skinning Menus Created Using the MenuNav Node Plugin + + * + + + +
+
+
+
+ - CSS Reset
+
-
+
+
- Global (Page-Level) Example + + + +
- Contextual Example + + + +
+
+
+
+ - DataSchema
+
-
+
+
- DataSchema.Array + + + +
- DataSchema.JSON + + + +
- DataSchema.XML for XML Data + + + +
- DataSchema.XML for HTML Tables + + + +
- DataSchema.Text + + + +
- Enforcing DataTypes + + + +
- DataSource.Local + + * + + + +
- DataSource.Get + + * + + + +
- DataSource.IO + + * + + + +
- DataSource.Function + + * + + + +
- DataSource with Caching + + * + + + +
- DataSource with Offline Cache + + * + + + +
+
+
+
+ - DataSource
+
-
+
+
- DataSource.Local + + + +
- DataSource.Get + + + +
- DataSource.IO + + + +
- DataSource.Function + + + +
- DataSource with Caching + + + +
- DataSource with Offline Cache + + + +
- DataSource with Polling + + + +
- Remote Data via DataSource + + * + + + +
+
+
+
+ - DataTable
+
-
+
+
- Basic DataTable + + + +
- DataTable + DataSource.Get + JSON Data + + + +
- DataTable + DataSource.IO + XML Data + + + +
- Formatting Row Data for Display + + + +
- Nested Column Headers + + + +
- Column Sorting + + + +
- Scrolling DataTable + + + +
- Sortable generated columns + + + +
- Master and detail tables + + + +
- Checkbox select column + + + +
- Creating a Modal Form + + * + + + +
+
+
+
+ - DataType
+
-
+
+
- Formatting Dates Using Language Resource Bundles + + + +
- Y.Date.parse() + + + +
- Y.Number.format() + + + +
- Y.Number.parse() + + + +
- Y.XML.format() + + + +
- Y.XML.parse() + + + +
- Sortable generated columns + + * + + + +
+
+
+
+ - Dial
+
-
+
+
- Basic Dial + + + +
- Dial Linked With Text Input + + + +
- Dial With Image Background + + + +
- Dial With a Surrounding Image + + + +
- Dial With Interactive UI + + + +
- Image Sprite Animation with Dial + + + +
- HSL Color Picker + + * + + + +
+
+
+
+ - Drag and Drop
+
-
+
+
- Simple Drag + + + +
- Drag - Node plugin + + + +
- Drag - Proxy + + + +
- Drag - Constrained to a Region + + + +
- Drag - Interaction Groups + + + +
- Using the Drag Shim + + + +
- Using Drop Based Coding + + + +
- Window Scrolling + + + +
- Drag Delegation + + + +
- Drag Delegation with a Drop Target + + + +
- Using Drag Plugins with Delegate + + + +
- List Reorder w/Bubbling + + + +
- List Reorder w/Scrolling + + + +
- Animated Drop Targets + + + +
- Photo Browser + + + +
- Portal Style Example + + + +
- Multiple Instances + + * + + + +
- Adjusting a Page Theme on the Fly + + * + + + +
+
+
+
+ - Event
+
-
+
+
- Simple DOM Events + + + +
- Creating an Arrow Event for DOM Subscription + + + +
- Supporting A Swipe Left Gesture + + + +
- Accessible Menu Button + + * + + + +
- Extending the Base Widget Class + + * + + + +
- Photo Browser + + * + + + +
- Portal Style Example + + * + + + +
- HTTP GET to request data + + * + + + +
+
+
+
+ - EventTarget
+
-
+
+
- Custom Event Bubbling and Behaviors + + + +
+
+
+
+ - FocusManager Node Plugin
+
-
+
+
- Accessible Toolbar + + + +
- Accessible Menu Button + + + +
+
+
+
+ - Get
+
-
+
+
+
+
+
+ - Graphics
+
-
+
+
- Basic Graphics Implementation + + + +
- Basic Path + + + +
- Create Gradient Fills + + + +
- Basic drag with graphic object + + + +
- Using Transforms + + + +
- Custom Shape + + + +
- Transparent Glass with Shadow + + + +
- Complex Drawing: Violin + + + +
- Animating Along a Curved Path + + * + + + +
+
+
+
+ - Handlebars
+
-
+
+
+
+
+
+ - History
+
-
+
+
- History + TabView + + + +
+
+
+
+ - ImageLoader
+
-
+
+
- Basic Features of the ImageLoader Utility + + + +
- Loading Images Below the Fold + + + +
- Using ImageLoader with CSS Class Names + + + +
+
+
+
+ - Internationalization
+
-
+
+
- Language Resource Bundles + + + +
- Formatting Dates Using Language Resource Bundles + + * + + + +
+
+
+
+ - IO Utility
+
-
+
+
- HTTP GET to request data + + + +
- Request XML data from Yahoo! Weather + + + +
- Request JSON using Yahoo! Pipes + + + +
- IO Plugin + + * + + + +
+
+
+
+ - JSON
+
-
+
+
- JSON with Y.io + + + +
- Rebuilding Class Instances from JSON Data + + + +
- Adding New Object Members During Parsing + + + +
- Todo List + + * + + + +
- Portal Style Example + + * + + + +
+
+
+
+ - JSONP
+
-
+
+
- Getting Cross Domain JSON Data Using Y.jsonp() + + + +
- Reusing a JSONPRequest Instance to Poll a Remote Server + + + +
- Wrapping async transactions with promises + + * + + + +
- Subclassing Y.Promise + + * + + + +
+
+
+
+ - MenuNav Node Plugin
+
-
+
+
- Basic Left Nav + + + +
- Basic Top Nav + + + +
- Menu Button Top Nav + + + +
- Split Button Top Nav + + + +
- Left Nav with Submenus with Shadows + + + +
- Left Nav With Submenus With Rounded Corners + + + +
- Skinning Menus Created Using the MenuNav Node Plugin + + + +
+
+
+
+ - Model
+
-
+
+
- Todo List + + * + + + +
- GitHub Contributors + + * + + + +
+
+
+
+ - Model List
+
-
+
+
- Todo List + + * + + + +
- GitHub Contributors + + * + + + +
+
+
+
+ - Node
+
-
+
+
- Set and Get Properties + + + +
- DOM Methods + + + +
- DOM Methods - Store + + + +
- Handling DOM Events + + + +
- Using NodeList - Simple + + + +
- Using NodeList - Ducks Game + + + +
- Delegating Node Events + + + +
- Node Positioning + + + +
- Node Styling + + + +
- Adding Node Content - Burger Builder + + + +
- Showing and Hiding + + + +
- Accessible Toolbar + + * + + + +
- Accessible Menu Button + + * + + + +
- Simple DOM Events + + * + + + +
- Photo Browser + + * + + + +
- Portal Style Example + + * + + + +
- Request XML data from Yahoo! Weather + + * + + + +
- Request JSON using Yahoo! Pipes + + * + + + +
+
+
+
+ - Normalize.css
+
-
+
+
- Applying normalize.css to a basic page + + + +
+
+
+
+ - Overlay
+
-
+
+
- Basic XY Positioning + + + +
- Simple Tooltip + + + +
- Alignment Support + + + +
- Stack Support + + + +
- Standard Module Support + + + +
- Constrain Support + + + +
- IO Plugin + + + +
- Animation Plugin + + + +
- Accessible Menu Button + + * + + + +
- Adjusting a Page Theme on the Fly + + * + + + +
+
+
+
+ - Panel
+
-
+
+
- Creating a Modal Form + + + +
- Creating an Animated Panel + + + +
- Creating a Reusable Dialog + + + +
+
+
+
+ - Pjax
+
-
+
+
+
+
+
+ - Plugin
+
-
+
+
- IO Plugin + + * + + + +
- Animation Plugin + + * + + + +
- Creating a Widget Plugin + + * + + + +
+
+
+
+ - Promise
+
-
+
+
- Wrapping async transactions with promises + + + +
- Subclassing Y.Promise + + + +
- Creating a Node Plugin that chains transitions + + + +
+
+
+
+ - Recordset
+
-
+
+
- Basic Recordset + + + +
- Recordset Sort Plugin + + + +
- Recordset Filter Plugin + + + +
- Recordset Indexer Plugin + + + +
+
+
+
+ - Resize
+
-
+
+
- Simple Resize + + + +
- Constrain a Resize + + + +
- 8-way Image Resize + + + +
- Widget with simple Resize Plugin + + + +
- Widget with Resize Plugin under constraints + + + +
+
+
+
+ - Rich Text Editor
+
-
+
+
- Using the Editor's instance + + + +
- Editor Events + + + +
- NodeChange Event + + + +
- ExecCommands + + + +
+
+
+
+ - Router
+
-
+
+
+
+
+
+ - ScrollView
+
-
+
+
- Basic ScrollView Without a Scroll Indicator + + + +
- ScrollView with Scroll Indicator and Link Suppression Behavior + + + +
- Horizontal ScrollView + + + +
- ScrollView With Pagination + + + +
+
+
+
+ - Slider
+
-
+
+
- Basic Sliders + + + +
- Creating a Slider from Existing Markup + + + +
- Alternate Skins + + + +
- RGB Slider + + * + + + +
- HSL Color Picker + + * + + + +
- HSL Harmony + + * + + + +
- Constrain Support + + * + + + +
- Adjusting a Page Theme on the Fly + + * + + + +
- Photo Browser + + * + + + +
+
+
+
+ - Sortable
+
-
+
+
- Simple Sortable List + + + +
- Floated List + + + +
- Multiple Lists + + + +
- Multiple Lists - Full Join + + + +
- Multiple Lists - Outer Join + + + +
- Multiple Lists - Inner Join + + + +
- Fish Sort - Multi Outer Join + + + +
- Sortable Events + + + +
+
+
+
+ - StyleSheet
+
-
+
+
- Adjusting a Page Theme on the Fly + + + +
- Photo Browser + + * + + + +
+
+
+
+ - SWF Utility
+
-
+
+
+
+
+
+ - TabView
+
-
+
+
- TabView from Existing Markup + + + +
- Dynamic TabView from JavaScript + + + +
- Adding and Removing Tabs + + + +
- Loading Tab Content + + + +
- History + TabView + + * + + + +
+
+
+
+ - Template
+
-
+
+
+
+
+
+ - Test
+
-
+
+
- Simple Testing Example + + + +
- Advanced Test Options + + + +
- Array Processing + + + +
- Asynchronous Testing + + + +
- Asynchronous Event Testing + + + +
+
+
+
+ - Test Console
+
-
+
+
+
+
+
+ - Transition
+
-
+
+
- Basic Node Transitions + + + +
- Using Transitions + + + +
- Showing and Hiding with Transitions + + + +
- Creating an Animated Panel + + * + + + +
- Building a UI with AsyncQueue + + * + + + +
- Creating a Node Plugin that chains transitions + + * + + + +
- Reusing a JSONPRequest Instance to Poll a Remote Server + + * + + + +
- Using NodeList - Simple + + * + + + +
- Using NodeList - Ducks Game + + * + + + +
- Adding Node Content - Burger Builder + + * + + + +
+
+
+
+ - Tree
+
-
+
+
+
+
+
+ - Uploader + + + + + +
- View
+
-
+
+
- Todo List + + * + + + +
- GitHub Contributors + + * + + + +
+
+
+
+ - Widget
+
-
+
+
- Extending the Base Widget Class + + + +
- Creating Custom Widget Classes With Extensions + + + +
- Creating a Widget Plugin + + + +
- Creating a Simple Tooltip Widget With Extensions + + + +
- Creating a Hierarchical ListBox Widget + + + +
+
+
+
+ - YQL Query
+
-
+
+
- Simple YQL Query + + + +
- Reusing a YQL query + + + +
- Photo Browser + + * + + + +
- Portal Style Example + + * + + + +
+
+
+
+ - YUI Global Object
+
-
+
+
- YUI Core + + + +
- Multiple Instances + + + +
- YUI Loader - Dynamically Adding YUI and External Modules + + + +
- Create Class Hierarchies with `extend` + + + +
- Compose Classes of Objects with `augment` + + + +
- Add Behaviors to Objects with `mix` + + + +
- Combine Data Sets with `merge` + + + +
- Check Data Types with `Lang` + + + +
- Browser Detection with `UA` + + + +
- Working with YUI 2 in 3 + + + +
- Natively use YUI Gallery Modules + + + +
- Programatically use Loader + + + +
- Using Y.Parallel + + + +
+
+
+