YUI 3.x Home -

YUI 3: Index of Library Examples

YUI 3: Index of Examples

YUI 3 ships with a series of 220 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 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.
Creating an Arrow Event for DOM SubscriptionUsing the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.
Supporting A Swipe Left GestureSupporting cross-device swipe gestures, using the event-move gesture events

Node

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.
Showing and HidingThis example demonstrates how to show and hide a Node.

The YUI Global Object

YUI CoreSetting up a YUI instance
Load All ModulesLoad All Modules
Multiple InstancesWorking with multiple YUI instances.
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 2 in 3Working with YUI 2 in 3
Natively use YUI Gallery ModulesNatively use YUI Gallery Modules
YUI 2 in 3 & Gallery ModulesUse YUI 2 in 3 & Gallery Modules

YUI 3 Utilities

Animation

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.

ArraySort

Case-insensitve array sortingCase-insensitive sorting of strings.

AsyncQueue

Building a UI with AsyncQueueThis example employs AsyncQueue to incrementally construct an application interface; this illustrates the approach you'd take to allow chunked rendering of the UI in a process-intensive application.

Cache

Basic CachingBasic caching functionality with the Cache Utility.
Offline CachingOffline caching implements HTML 5 localStorage when available, to allow data to persist across browser sessions.

Cookie

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

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

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 Offline CacheThe DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.
DataSource with PollingUse the Pollable extension to enable polling in your DataSource.

DataType

Formatting Dates Using Language Resource BundlesFormatting 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 DragThis example shows a simple drag interaction that doesn't require a drop interaction.
Drag Node PluginThis example shows how to apply the Drag Plugin to a node
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 Node's 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 ScrollingThis example shows how you can use the DD Scroll plugin to scroll the browser window as you drag.
Drag DelegationThis example shows how you can use DD.Delegate to create a scalable solution which supports multiple draggable items.
Drag Delegation with a Drop TargetThis example uses DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.
Using Drag Plugins with DelegateThis example show how you can use the Drag plugins with a DD Delegate based solution.
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 BrowserAn example Photo Browser application.

Get

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.

History

History + TabViewThis example demonstrates how to add browser history support to a TabView widget using the History Utility.

IO

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.

ImageLoader

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.

Internationalization

Language Resource BundlesHow to create components which use language resource bundles

JSON

JSON with Y.ioUse JSON to parse data received via XMLHttpRequest via Y.io calls — a simple JSON use case.
Rebuilding Class Instances from JSON DataUse the replacer and reviver parameters to reconstitute object instances that have been serialized to JSON.
Adding New Object Members During ParsingUse a currency conversion calculation to add a new price member to a JSON response, demonstrating how JSON data, once retrieved, can be transformed during parsing.

JSONP

Getting Cross Domain JSON Data Using Y.jsonp()Get basic GitHub user info using a Y.jsonp(url, callback).
Reusing a JSONPRequest Instance to Poll a Remote ServerCreate a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.

Recordset

Basic RecordsetShows how to instantiate and interact with a standard Recordset by adding, removing and updating records/objects. Explains the events that are fired, and shows how to access the built-in hash table that stores records by their YUIDs.
Recordset Filter PluginShows how to use filtering methods to Recordset. Key-value filtering, and filtering by providing a custom function are covered.
Recordset Indexer PluginShows how to create and access hash tables on Recordset. Tables are kept in sync through events fired by Recordset.
Recordset Sort PluginShows how to sort a Recordset using the default sorter, or a custom sort function. Additionally, demonstrates how convenience attributes help in determining when Recordset is in a sorted state, and what the last sort parameters were.

Resize

Simple ResizeThis example shows a simple resize implemenation.
Simple Resize with Constrain PluginThis example shows a simple resize implementation that utilizes the ResizeConstrained plugin to set min/max dimensions and to lock in the resized element's aspect ratio.
8-way Image ResizeThis example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.

Sortable

Simple Sortable ListSimple Sortable list example
Simple Sortable List - Floated NodesSimple Sortable list example with floated nodes.
Multiple Sortable Lists - SeparateMultiple Sortable Lists that are separate from one another.
Multiple Sortable Lists - Full JoinMultiple Sortable Lists that are fully joined together.
Multiple Sortable Lists - Outer JoinMultiple Sortable Lists that are outer joined together.
Multiple Sortable Lists - Inner JoinMultiple Sortable Lists that are inner joined together.

StyleSheet

Adjusting a Page Theme on the FlyUse StyleSheet to adjust the CSS rules applying a page theme from user input

Transition

Basic Node TransitionsDemonstrates the basic usage of Transitions.
Using Node TransitionsDemonstrates more advanced usage of Transitions.
Showing and Hiding with TransitionsDemonstrates how to animate Node's show and hide methods.

Uploader

Single File Upload with Progress Tracking and a Sprite-skinned ButtonExplores using the Uploader to create a custom-skinned Browse button, upload a single file to the server, while tracking its upload progress
Multiple File Upload with Progress Tracking and a Transparent Overlay Upload ButtonDemonstrates how to upload multiple files and track their progress, while using custom UI for the 'Browse' button.
Single File Upload with GET and POST Vars Submission and Server Data ReturnExplores including POST and GET variables with the file upload and receiving a response from the server

YQL Query

Simple YQL QueryCreate a simple YQL Query to retrieve data from the Yahoo! Weather YQL table.
YQL Flickr RequeryUse the Flickr Recent Photos YQL table to pull in a small set of recent Flickr images every 8 seconds.
YQL 2-Legged oAuthUse YQL Query and the oAuth YUI Gallery module to make an authenticated YQL request to the Yahoo! News Search web service

YUI 3 Component Infrastructure

Attribute

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.

Widget

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 Widget PluginShows how to create an IO plugin for Widget
Creating a Simple Tooltip WidgetShows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class.
Creating a Hierarchical ListBox WidgetShows how to extend the Widget class, and add WidgetParent and WidgetChild to create a simple ListBox widget.

YUI 3 Widgets

AutoComplete

Basic Local DataHow to provide autocomplete suggestions from a local array.
Remote Data via JSONPHow to provide autocomplete suggestions using a remote JSONP source.
Remote Data via YQLHow to provide autocomplete suggestions using a YQL query source.
Remote Data via DataSourceHow to provide autocomplete suggestions using a DataSource instance.
Tag Completion using Query DelimitersHow to implement delimited tag completion.
Find Photos on Flickr (Custom Formatting, YQL Source)How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.
Filter a Set of Existing Items on the PageHow to use autocomplete-base to filter a set of existing items on a page.

Charts

Basic Charts ImplementationShows how to create a simple chart.
Chart with Multiple SeriesChart with multiple series.
Specify Chart TypeSpecify the type of chart.
Create Stacked ChartCreates a stacked column chart.
Create a Chart with a Time AxisCreates a chart with a Time Axis.
Add Gridlines to a ChartAdds gridlines to a chart.
Create Stacked Area Chart with Planar Based EventsCreates a stacked area chart with planar based events.
Customize a ChartCustomize a chart with its global styles object.
Customize a Chart's TooltipCustomize a tooltip using the tooltip attribute.
Define a Chart's Axes and SeriesSpecify axes and series in a chart.
Pie ChartShows how to create a pie chart.
Dual Axes ChartShows how to create a chart with multiple axes.
Update Chart AxisShows how access and update a chart's axis.
Update Chart SeriesShows how access and update a chart's series.

DataTable

Basic DataTableThis example illustrates simple DataTable use cases.
DataTable + DataSource.Get + JSON DataDataTable loaded with JSON data from a remote webservice via DataSource.Get
DataTable + DataSource.IO + XML DataDataTable loaded with XML data from a remote webservice via DataSource.IO.
Formatting Row Data for DisplayCustom format data for display.
Nested Column HeadersDataTable with nested column headers.
Column SortingDataTable with column sorting.
Scrolling DataTableDataTable with vertical and/or horizontal scrolling rows.

Dial

Basic DialCreate a Dial from existing markup on the page — a simple use case.
Dial Linked With Text InputLink a Dial with a text input field.
Dial With Image BackgroundUse image backgrounds to control the visual display of a Dial.
Dial With a Surrounding ImageUse images to surround a Dial instance and provide additional styling.
Dial With Interactive UIThis example employs Dial to drive an interactive UI.

Overlay

Basic XY PositioningShows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.
Alignment SupportShows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to 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.
Constrain SupportShows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay.
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.

Rich Text Editor

Using the Editor's InstanceUse the Editor's instance to query the iframe
Using the Editor's EventsUse the Editor's events
Using the Editor's nodeChange EventUse the Editor's nodeChange event
Creating ExecCommandsCreating custom ExecCommands

ScrollView

Basic ScrollView Without a Scroll IndicatorScrollView without a Scroll Indicator
ScrollView with Scroll Indicator and Link Suppression Behavior.This example shows the classic Scrollview implementation, including scroll indicators (bars) and including code to suppress link navigation while scrolling.
Horizontal ScrollViewHorizontal ScrollView
ScrollView Paginator PluginScrollView Paginator Plugin

Slider

Basic SlidersThe basics of setting up a horizontal and vertical Slider
Creating a Slider from Existing MarkupCreating a horizontal Slider from existing markup
Alternate SkinsSpecifying an alternate skin for a Slider instance

TabView

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

YUI 3 Developer Tools

Console

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

Plugin.ConsoleFilters

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

Profiler

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

Test

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 Grids

Using UnitsEach unit has a className that provides its percentage width.
Fixed Page TemplateThis is a template for creating fixed-width layouts.
Fluid Page TemplateThis is a template for creating fluid layouts.
Aligning UnitsBasic CSS properties are leveraged to horizontally and vertically align units.

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 © 2011 Yahoo! Inc. All rights reserved.

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