YUI 3.x Home -

Site Search (YDN & YUIBlog):

# Yahoo! User Interface Library (YUI): Index of Library Examples

Note: This is YUI 3.x. Looking for YUI 2.x?

## Official YUI Examples

The YUI Library 3.x ships with a series of 128 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.
Using the 'focus' and 'blur' custom events | Using the ClassNameManager Utility and the Event Utility's `focus` and `blur` custom events to skin checkboxes.

#### 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.
Using Node Change Events | This example demonstrates how to listen and respond to Node attribute changes.

#### The YUI Global Object
YUI Core | YUI Core
Load All Modules | Load All Modules
Multiple Instances | Working with multiple YUI instances.
YUI 2.x and 3.x | Working with YUI 2.x and 3.x.
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 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 | 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 data from in-memory JavaScript arrays and objects.
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
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
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.

#### 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

#### 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 Configuration | Use the Attribute API to define, set and get attribute values.
Change Events | How to listen for changes in attribute values.
Getters, Setters and Validators | Add custom methods to get and set attribute values and provide validation support.
readOnly and writeOnce Configuration | Configure attributes to be readOnly or writeOnce.

#### 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 simple Tooltip widget | Shows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class.

### YUI 3 Widgets

#### Overlay
Basic XY Positioning | Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.
Extended XY Positioning | Shows how to use the Overlay's extended XY positioning support, to align the Overlay relative to another element, or 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.
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

### 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
Using the ConsoleFilters plugin | Adding the ConsoleFilters plugin to a Console instance for more granular run time log message filtering
Creating a universal Console | Using the Console's logSource attribute to consolidate log messages from multiple YUI instances into one Console

#### 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

Copyright © 2009 Yahoo! Inc. All rights reserved.

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