YUI 3.x Home -

YUI 3: Index of Library Examples

YUI 3: Index of Examples

YUI 3 ships with a series of 130 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


Simple DOM EventsUse 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 EventsUse 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 LoaderUsing Progressive Enhancement to skin checkboxes with the help of the Loader and the Event Utility's "focus" and "blur" events and the "delegate" method.


Node BasicsUsing selectors and property accessors with Node.
DOM MethodsUsing DOM methods.
NodeList EventsUsing events with NodeList instances.
NodeListNodeList provides Node functionality for multiple nodes.
Delegating Node EventsUsing a single event listener to handle events on multiple nodes.
Measuring the Window and DocumentThis example demonstrates how to measure the window and document.
Node PositioningThis example demonstrates how to position an element in page coordinates.
Node StylingThis example demonstrates how to set styles and get style information.
Adding Node ContentThis example demonstrates how to insert content into a Node.

The YUI Global Object

YUI CoreYUI Core
Load All ModulesLoad All Modules
Multiple InstancesWorking with multiple YUI instances.
YUI 2.x and 3.xWorking with YUI 2.x and 3.x.
YUI Loader - Dynamically Adding YUI and External ModulesOn-demand loading of YUI and non-YUI assets
Create Class Hierarchies with extendCreate class hierarchies with extend
Compose Classes of Objects with augmentCreating a composition-based class structure using augment
Add Behaviors to Objects with mixAdd behaviors to objects or static classes with mix
Combine Data Sets with mergeCombine data sets and create shallow copies of objects with merge
Check Data Types with LangCheck data types with the Lang Utilities
Browser Detection with UAGet information about the current user agent with UA

YUI 3 Utilities


Basic AnimationCreating and using a simple animation.
Animation EasingThe 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 ColorsColor 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 IterationsThe direction attribute can be used to reverse the animation on alternate iterations.
Animating XY PositionThis example shows you how to animate the xy coordinates of an element.
Animating Along a Curved PathThis example demonstrates animating an element along a curved path using bezier control points.
Animated ScrollingThis example shows how to animate the scrolling of an element.
Reversing an AnimationThe reverse attribute allows you to change the run direction of an animation.
Using the End EventThis example demonstrates how to use the end event.
Chaining Animations Using the end EventAnimations can be chained (set to fire sequentially) using Animation's end event.


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

Browser History Utility

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

Cache Utility

Basic CachingBasic caching functionality with the Cache Utility.


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

DataSchema Utility

DataSchema.ArraySchema parsing a JavaScript array.
DataSchema.JSONSchema parsing JSON data.
DataSchema.XML for HTML TablesSchema parsing data held in TABLE elements.
DataSchema.XML for XML DataSchema parsing XML data.
DataSchema.TextSchema parsing delimited plain-text data.
Enforcing DataTypesParsing data into specified types as the schema is being applied.

DataSource Utility

DataSource.LocalThe Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.
DataSource.GetThe 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.IOThe IO DataSource manages retrieval of data from remote sources, via the IO Utility.
DataSource.FunctionThe Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms
DataSource with CachingUse the DataSourceCache plugin to enable caching and reduce server calls to remote sources.
DataSource with PollingUse the Pollable extension to enable polling in your DataSource.

DataType Utility

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 DragThis example shows a simple drag interaction that doesn't require a drop interaction.
Drag Node PluginThis example shows using the Drag Node Plugin.
Proxy DragThis example shows a simple proxy drag interaction that doesn't require a drop interaction.
Drag Constrained to a RegionThis example shows how to constrain a draggable Node to another Nodes region.
Interaction GroupsUsing 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 ShimThis example shows the use of the drag shim when dragging nodes over other troublesome nodes.
Animated Drop TargetsThis example will show you how to make an animated node a Drop target.
Drop Based CodingThis example shows how to use the Drop Target events to code your application.
Window ScrollingUsing the Window Scroll plugin
List reorder w/BubblingThis example shows how to make a sortable list using Custom Event Bubbling.
List reorder w/ScrollingThis example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.
Portal Style ExamplePortal style example using Drag & Drop Event Bubbling and Animation.
Photo BrowserExample Photo Browser application.


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


GET TransactionExplores the use of HTTP GET to request data from the server, and handling the transaction lifecycle using events.
POST TransactionExplores 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 ProxyDemonstrates 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! PipesFetch a cross-domain, JSON-formatted RSS news feed directly from Yahoo! Pipes.


Basic Features of the ImageLoader UtilityDemonstrates 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 FoldLoading images above the fold immediately while deferring the loading of images below the fold.
Using ImageLoader with CSS Class NamesUsing CSS class names to target specific images for deferred loading.


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


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

YUI 3 Component Infrastructure


Basic Attribute ConfigurationUse the Attribute API to define, set and get attribute values.
Read-Only and Write-Once AttributesConfigure attributes to be readOnly or writeOnce.
Attribute Change EventsHow to listen for changes in attribute values.
Attribute Based Speed DatingCreate a basic SpeedDater class, with Attribute support
Attribute Event Based Speed DatingRefactors 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 ValidatorsAdd custom methods to get and set attribute values and provide validation support.


Extending the base widget classShows how to extend the base widget class, to create your own Widgets.
Creating custom widget classesShows how to use Base.build to create custom Widget classes.
Creating a simple Tooltip widgetShows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class.

YUI 3 Widgets


Basic XY PositioningShows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.
Extended XY PositioningShows how to use the Overlay's extended XY positioning support, to align the Overlay relative to another element, or the viewport.
Stack SupportShows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page.
Standard Module SupportShows how to modify content in the Overlay's header, body and footer sections.
IO PluginShows how to create a simple plugin to retrieve content for the Overlay using the io utility.
Animation PluginShows how to create a simple plugin to animate the Overlay's movement and visibility.


Basic SlidersThe basics of setting up a horizontal and vertical Slider
Creating a Slider from existing markupCreating a horizontal Slider from existing markup

YUI 3 Developer Tools


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


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


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


Simple Testing ExampleDemonstrates basic usage of YUI Test for setting up and running tests.
Advanced Test OptionsDemonstrates 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 ProcessingDemonstrates how to use the ArrayAssert object to test array data.
Asynchronous TestingDemonstrates basic asynchronous tests.
Asynchronous Event TestingDemonstrates using events with asynchronous tests.

YUI 3 CSS Foundation

CSS Base

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

CSS Fonts

Global (Page-Level) ExampleWhen 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 ExampleUse the alternate contextual version of YUI Fonts to have precise control over which regions of the page are targeted.
Setting Font SizeDefine all non-baseline sizes in percentages when using YUI Fonts.
Setting Font FamilyWhen using YUI Fonts, set font-family as you would normally.

CSS Reset

Global (Page-Level) ExampleWhen CSS Reset is included in a page, it removes the browser-provided styling for HTML elements.
Contextual ExampleCSS 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 ToolbarCreating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States.
Accessible TabViewCreating 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 ButtonCreating 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 NavCreating left navigation using the MenuNav Node Plugin
Basic Top NavCreating top navigation using the MenuNav Node Plugin
Menu Button Top NavCreating menu button navigation using the MenuNav Node Plugin
Split Button Top NavCreating split button navigation using the MenuNav Node Plugin
Left Nav With Submenus With ShadowsAdding shadows to submenus of a left nav using the MenuNav Node Plugin
Left Nav With Submenus With Rounded CornersAdding rounded corners to submenus of a left nav using the MenuNav Node Plugin
Skinning Menus Created Using the MenuNav Node PluginSkining a menu built using the MenuNav Node Plugin to look like the menus on Flickr
Adding Submenus On The FlyBuilding Submenus On The Fly Using the MenuNav Node Plugin with the IO Utility

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings