YUI 3: Index of Library Examples

YUI 3: Index of Examples

YUI 3 ships with a series of 152 examples that illustrate the implementation of its components. The examples can be starting points for your exploration, code snippets to jump-start your own programming, or simply inspiration as to how various interaction patterns can be enabled in the web browser via YUI.

This page allow you to explore these examples component-by-component; on this page you'll find the full index of library examples with the link and short description of each.

YUI 3 Core

Event
Simple DOM Events	Use the Event Utility to attach simple DOM event handlers.
Using 'available', 'contentready', and 'domready'	Event Utility gives you control over when you execute your scripts. In addition to the window's load event, Event Utility lets you know when an element is available, when its children are available, and when the page's full DOM is available.
Using Custom Events	Use the Event Utility to create Custom Events that are bubbleable, preventable, cancelable and much more.
Skinning via Progressive Enhancement using the Event Utility and the Loader	Using Progressive Enhancement to skin checkboxes with the help of the Loader and the Event Utility's "focus" and "blur" events and the "delegate" method.
Creating a hover event for DOM subscription	Using the new synthetic event API to simulate a new DOM event that handles the over and out moments of hovering in one subscription.

Node
Node Basics	Using selectors and property accessors with Node.
DOM Methods	Using DOM methods.
NodeList Events	Using events with NodeList instances.
NodeList	NodeList provides Node functionality for multiple nodes.
Delegating Node Events	Using a single event listener to handle events on multiple nodes.
Measuring the Window and Document	This example demonstrates how to measure the window and document.
Node Positioning	This example demonstrates how to position an element in page coordinates.
Node Styling	This example demonstrates how to set styles and get style information.
Adding Node Content	This example demonstrates how to insert content into a Node.

The YUI Global Object
YUI Core	YUI Core
Load All Modules	Load All Modules
Multiple Instances	Working with multiple YUI instances.
YUI Loader - Dynamically Adding YUI and External Modules	On-demand loading of YUI and non-YUI assets
Create Class Hierarchies with extend	Create class hierarchies with extend
Compose Classes of Objects with augment	Creating a composition-based class structure using augment
Add Behaviors to Objects with mix	Add behaviors to objects or static classes with mix
Combine Data Sets with merge	Combine data sets and create shallow copies of objects with merge
Check Data Types with Lang	Check data types with the Lang Utilities
Browser Detection with UA	Get information about the current user agent with UA
YUI 2 in 3	Working with YUI 2 in 3
Natively use YUI Gallery Modules	Natively use YUI Gallery Modules
YUI 2 in 3 & Gallery Modules	Use YUI 2 in 3 & Gallery Modules

YUI 3 Utilities

Animation
Basic Animation	Creating and using a simple animation.
Animation Easing	The Animation Utility allows you to implement 'easing effects' — for example, when an animation gradually slows down as it nears completion, that's an easing effect known as 'ease-in'. This example shows you how to use easing effects with your animations.
Animating Colors	Color animations can be effective indicators of state during the lifespan of a dynamic page. This example shows you how to animate color attributes of an element.
Alternating Iterations	The direction attribute can be used to reverse the animation on alternate iterations.
Animating XY Position	This example shows you how to animate the xy coordinates of an element.
Animating Along a Curved Path	This example demonstrates animating an element along a curved path using bezier control points.
Animated Scrolling	This example shows how to animate the scrolling of an element.
Reversing an Animation	The reverse attribute allows you to change the run direction of an animation.
Using the End Event	This example demonstrates how to use the end event.
Chaining Animations Using the end Event	Animations can be chained (set to fire sequentially) using Animation's end event.

AsyncQueue
Building a UI with AsyncQueue	Using AsyncQueue to incrementally construct an application interface

Browser History Utility
Simple Navigation Bar	Use the Browser History Utility to "ajaxify" a simple navigation bar without compromising the use of the back/forward buttons.

Cache Utility
Basic Caching	Basic caching functionality with the Cache Utility.

Cookie
Simple Cookie Example	Demonstrates basic usage of the Cookie utility for reading and writing cookies.
Advanced Cookie Example	Demonstrates using the Cookie utility to get, set and remove cookies.
Subcookie Example	Demonstrates using the Cookie utility to get and set subcookies.

DataSchema Utility
DataSchema.Array	Schema parsing a JavaScript array.
DataSchema.JSON	Schema parsing JSON data.
DataSchema.XML for HTML Tables	Schema parsing data held in TABLE elements.
DataSchema.XML for XML Data	Schema parsing XML data.
DataSchema.Text	Schema parsing delimited plain-text data.
Enforcing DataTypes	Parsing data into specified types as the schema is being applied.

DataSource Utility
DataSource.Local	The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.
DataSource.Get	The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy.
DataSource.IO	The IO DataSource manages retrieval of data from remote sources, via the IO Utility.
DataSource.Function	The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms
DataSource with Caching	Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.
DataSource with Polling	Use the Pollable extension to enable polling in your DataSource.

DataType Utility
Formatting Dates Using Language Resource Bundles	Formatting dates into strings using pre-packaged language resource bundles.
DataType.Date.format()	Formatting dates into strings.
DataType.Date.parse()	Parsing data into dates.
DataType.Number.format()	Formatting numbers into strings.
DataType.Number.parse()	Parsing data into numbers.
DataType.XML.format()	Formatting XML documents into strings.
DataType.XML.parse()	Parsing strings into XML documents.

Drag & Drop
Simple Drag	This example shows a simple drag interaction that doesn't require a drop interaction.
Drag Node Plugin	This example shows using the Drag Node Plugin.
Proxy Drag	This example shows a simple proxy drag interaction that doesn't require a drop interaction.
Drag Constrained to a Region	This example shows how to constrain a draggable Node to another Nodes region.
Interaction Groups	Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation.
Using the Drag Shim	This example shows the use of the drag shim when dragging nodes over other troublesome nodes.
Animated Drop Targets	This example will show you how to make an animated node a Drop target.
Drop Based Coding	This example shows how to use the Drop Target events to code your application.
Window Scrolling	Using the Window Scroll plugin
Drag Delegation	Using DD.Delgate for multiple items
Drag Delegation with a Drop Target	Using DD.Delgate for dragging multiple items and dropping on a Drop Target.
Using Drag plugins with Delegate	Using Drag plugins with Delegate
List reorder w/Bubbling	This example shows how to make a sortable list using Custom Event Bubbling.
List reorder w/Scrolling	This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.
Portal Style Example	Portal style example using Drag & Drop Event Bubbling and Animation.
Photo Browser	Example Photo Browser application.

Get
Getting a Script Node with JSON Data	This example illustrates the simple use case in which the Get Utility is used to retrieve JSON data from a web service.

IO
GET Transaction	Explores the use of HTTP GET to request data from the server, and handling the transaction lifecycle using events.
POST Transaction	Explores the use of HTTP POST to send data to the server and retrieve the server's response.
XML Transaction — Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy	Demonstrates how to retrieve XML data from a web service and make use of that information within the page.
Cross-Domain JSON Transaction — Retrieving a News Feed from Yahoo! Pipes	Fetch a cross-domain, JSON-formatted RSS news feed directly from Yahoo! Pipes.

ImageLoader
Basic Features of the ImageLoader Utility	Demonstrates the basic features and operation of the ImageLoader Utility, deferring the loading of images until specific events happen or specific time limits expire.
Loading Images Below the Fold	Loading images above the fold immediately while deferring the loading of images below the fold.
Using ImageLoader with CSS Class Names	Using CSS class names to target specific images for deferred loading.

Internationalization
Language Resource Bundles	How to create components which use language resource bundles

JSON
JSON with Y.io	Use JSON to parse data received from Y.io calls
Rebuilding class instances from JSON data	Using the replacer and reviver parameters to reconstitute object instances
Adding new object members during parsing	Using a currency conversion calculation to add a new price member to a JSON response

Sortable List Utility
Simple Sortable List	Simple Sortable list example
Simple Sortable List - Floated Nodes	Simple Sortable list example with floated nodes.
Multiple Sortable Lists - Separate	Multiple Sortable Lists that are separate from one another.
Multiple Sortable Lists - Full Join	Multiple Sortable Lists that are fully joined together.
Multiple Sortable Lists - Outer Join	Multiple Sortable Lists that are outer joined together.
Multiple Sortable Lists - Inner Join	Multiple Sortable Lists that are inner joined together.

StyleSheet
Adjusting a page theme on the fly	Use StyleSheet to adjust the CSS rules applying a page theme from user input

YUI 3 Component Infrastructure

Attribute
Basic Attribute Configuration	Use the Attribute API to define, set and get attribute values.
Read-Only and Write-Once Attributes	Configure attributes to be readOnly or writeOnce.
Attribute Change Events	How to listen for changes in attribute values.
Attribute Based Speed Dating	Create a basic SpeedDater class, with Attribute support
Attribute Event Based Speed Dating	Refactors the basic Speed Dating example, to use attribute change events to update rendered elements, and have two instances react to another.
Attribute Getters, Setters and Validators	Add custom methods to get and set attribute values and provide validation support.

Widget
Extending the base widget class	Shows how to extend the base widget class, to create your own Widgets.
Creating custom widget classes	Shows how to use Base.build to create custom Widget classes.
Creating a widget plugin	Shows how to create an IO plugin for Widget
Creating a simple Tooltip widget	Shows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class.
Creating a hierarchical ListBox widget	Shows how to extend the Widget class, and add WidgetParent and WidgetChild to create a simple ListBox widget.

YUI 3 Widgets

Overlay
Basic XY Positioning	Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.
Alignment Support	Shows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to the viewport.
Stack Support	Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page.
Standard Module Support	Shows how to modify content in the Overlay's header, body and footer sections.
Constrain Support	Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay.
IO Plugin	Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.
Animation Plugin	Shows how to create a simple plugin to animate the Overlay's movement and visibility.

Slider
Basic Sliders	The basics of setting up a horizontal and vertical Slider
Creating a Slider from existing markup	Creating a horizontal Slider from existing markup
Alternate skins	Specifying an alternate skin for a Slider instance

TabView
TabView from Existing Markup	This example shows how to create a TabView wigdet from existing HTML.
Dynamic TabView from JavaScript	This example shows how to create a TabView wigdet from JavaScript.
Adding and Removing Tabs	This example shows how to add and remove Tabs.
Loading Tab Content	This example shows how to load tab content remotely using an IO plugin.

YUI 3 Developer Tools

Console
Creating a Console for debugging	The basics of setting up a Console
YUI configuration to filter log messages	Using your YUI instance configuration to filter which messages are reported in the Console
Creating a universal Console	Using the Console's logSource attribute to consolidate log messages from multiple YUI instances into one Console

Plugin.ConsoleFilters
Using the ConsoleFilters plugin	Adding the ConsoleFilters plugin to a Console instance for more granular run time log message filtering

Profiler
Simple Profiling Example	Demonstrates basic usage of the Profiler for profiling functions.
Object Profiling Example	Demonstrates usage of the Profiler for profiling objects.

Test
Simple Testing Example	Demonstrates basic usage of YUI Test for setting up and running tests.
Advanced Test Options	Demonstrates how to use advanced testing features such as defining tests that should fail, tests that should be ignored, and tests that should throw an error.
Array Processing	Demonstrates how to use the ArrayAssert object to test array data.
Asynchronous Testing	Demonstrates basic asynchronous tests.
Asynchronous Event Testing	Demonstrates using events with asynchronous tests.

YUI 3 CSS Foundation

CSS Base
Global (Page-Level) Example	When CSS Base is included in a page it provides consistent and basic cross-browser styling for HTML elements.
Contextual Example	CSS Base applied to a portion of a page based on the location of a class value.

CSS Fonts
Global (Page-Level) Example	When CSS Fonts is included in a page, it applies a baseline font treatment to all HTML elements. This baseline is Arial at the equivalent of 13px size and 16px line-height.
Contextual Example	Use the alternate contextual version of YUI Fonts to have precise control over which regions of the page are targeted.
Setting Font Size	Define all non-baseline sizes in percentages when using YUI Fonts.
Setting Font Family	When using YUI Fonts, set font-family as you would normally.

CSS Reset
Global (Page-Level) Example	When CSS Reset is included in a page, it removes the browser-provided styling for HTML elements.
Contextual Example	CSS Reset applied to a portion of a page based on the location of a class value.

YUI 3 Node Plugins

Focus Manager Node Plugin
Accessible Toolbar	Creating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States.
Accessible TabView	Creating an accessible tabview widget using the Focus Manager Node Plugin, Event's delegation support, and Node's support for the WAI-ARIA Roles and States.
Accessible Menu Button	Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.

MenuNav Node Plugin
Basic Left Nav	Creating left navigation using the MenuNav Node Plugin
Basic Top Nav	Creating top navigation using the MenuNav Node Plugin
Menu Button Top Nav	Creating menu button navigation using the MenuNav Node Plugin
Split Button Top Nav	Creating split button navigation using the MenuNav Node Plugin
Left Nav With Submenus With Shadows	Adding shadows to submenus of a left nav using the MenuNav Node Plugin
Left Nav With Submenus With Rounded Corners	Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin
Skinning Menus Created Using the MenuNav Node Plugin	Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr
Adding Submenus On The Fly	Building Submenus On The Fly Using the MenuNav Node Plugin with the IO Utility