Version 3.16.0

YUI Examples

Core

Event

Simple DOM Events Use the Event Utility to attach simple DOM event handlers.
Creating an Arrow Event for DOM Subscription Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.
Supporting A Swipe Left Gesture Supporting cross-device swipe gestures, using the event-move gesture events

Node

Set and Get Properties Using selectors and property accessors with Node.
DOM Methods Using DOM methods with Node.
DOM Methods - Store Building a simple store and shopping cart.
Handling DOM Events Listening for DOM events with Node instances.
Using NodeList - Simple NodeList provides Node functionality for manipulating multiple nodes at once.
Using NodeList - Ducks Game How to use multiple NodeList features to build a simple game.
Delegating Node Events Using a single event listener to handle events on multiple nodes.
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 - Burger Builder This example demonstrates how to insert content into a Node.
Showing and Hiding This example demonstrates how to show and hide a Node.

YUI Global Object

YUI Core Setting up a YUI Instance
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`
Working with YUI 2 in 3 Working with YUI 2 in 3
Natively use YUI Gallery Modules Natively use YUI Gallery Modules
Programatically use Loader Programatically use Loader
Using Y.Parallel Executing functions in parallel

CSS

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.

CSS Grids

Using Grid Units Each unit has a className that provides its percentage width.
Fixed Page Template This is a template for creating fixed-width layouts.
Fluid Page Template This is a template for creating fluid layouts.
Aligning Grid Units Basic CSS properties are leveraged to horizontally and vertically align units.
Responsive Newspaper Layout A responsive layout that looks like a newspaper

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.

Normalize.css

Applying normalize.css to a basic page When CSS Base is included in a page it provides consistent and basic cross-browser styling for HTML elements.

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

ConsoleFilters Plugin

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

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.

Infrastructure

App Framework

Todo List A basic todo list built with the Model, Model List, and View components.
GitHub Contributors An application to browse through the contributors of a GitHub project.

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.

EventTarget

Custom Event Bubbling and Behaviors Publish an event with a default behavior, as well as behaviors for reacting to preventing the default or stopping bubbling.

Widget

Extending the Base Widget Class Shows how to extend the base widget class, to create your own Widgets.
Creating Custom Widget Classes With Extensions Shows how to use Base.create and mix/match extensions to create custom Widget classes.
Creating a Widget Plugin Shows how to create an IO plugin for Widget.
Creating a Simple Tooltip Widget With Extensions 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.

Utilities

Anim

Basic Animation Creating and using a simple animation.
Easing Effects 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.
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.

AsyncQueue

Building a UI with AsyncQueue This 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 Caching Basic caching functionality with the Cache Utility.
Offline Caching Offline caching implements HTML 5 localStorage when available, to allow data to persist across browser sessions.

Color

RGB Slider Use three sliders to control RGB values and update Hex and HSL strings.
HSL Color Picker Use the HSL color picker to select a new color. Then chose the color type you like best.
HSL Harmony Use the HSL color picker to create harmony colors.
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

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

DataSource

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

DataType

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

Drag and Drop

Simple Drag A simple drag interaction that doesn't require a drop interaction.
Drag - Node plugin How to apply the Drag Plugin to a node.
Drag - Proxy A simple proxy drag interaction that doesn't require a drop interaction.
Drag - Constrained to a Region How to constrain a draggable Node to another Node's region.
Drag - 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 The use of the drag shim when dragging nodes over other troublesome nodes.
Using Drop Based Coding How to use the Drop Target events to code your application.
Window Scrolling How you can use the DD Scroll plugin to scroll the browser window as you drag.
Drag Delegation How to use DD.Delegate to create a scalable solution which supports multiple draggable items.
Drag Delegation with a Drop Target Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.
Using Drag Plugins with Delegate How to use Drag plugins with a DD Delegate based solution.
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.
Animated Drop Targets How to make an animated node a Drop target.
Photo Browser Example Photo Browser application.
Portal Style Example Portal style example using Drag & Drop Event Bubbling and Animation.

FocusManager 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 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.

Graphics

Basic Graphics Implementation Shows how to create a Graphic instance and add shapes.
Basic Path Shows how to draw lines and polygons.
Create Gradient Fills Shows how to create linear and radial gradient fills.
Basic drag with graphic object Shows how to add drag to a shape.
Using Transforms Shows how to apply transforms to shape.
Custom Shape Shows how to use a custom shape with the Graphics module.
Transparent Glass with Shadow Shows to use the graphics api to draw a realistic glass.
Complex Drawing: Violin Shows to use the graphics api to draw a violin.

History

History + TabView Demonstrates how to add browser history support to a TabView widget using the History Utility.

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.

IO Utility

HTTP GET to request data Use IO to request data over HTTP.
Request XML data from Yahoo! Weather Use IO to request XML data from a remote web service.
Request JSON using Yahoo! Pipes Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.

JSON

JSON with Y.io Use JSON to parse data received via XMLHttpRequest via Y.io calls — a simple JSON use case.
Rebuilding Class Instances from JSON Data Use the replacer and reviver parameters to reconstitute object instances that have been serialized to JSON.
Adding New Object Members During Parsing Use 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 Server Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.

Paginator

Slideshow This example illustrates how to create a slideshow using paginator to control the slides.
Tables An HTML table containing 50 states and their population with an attached paginator to view the information in small sections.
Search Results An application using the Flickr API to display images with a paginator control to step through the results.

Promise

Wrapping async transactions with promises Wrapping async transactions with promises
Subclassing Y.Promise Extend Y.Promise to create classes that encapsulate standard transaction logic in descriptive method names
Creating a Node Plugin that chains transitions Extend the Promise class to create your own Node plugin that chains transitions

Recordset

Basic Recordset Shows 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 Sort Plugin Shows 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.
Recordset Filter Plugin Shows how to use filtering methods to Recordset. Key-value filtering, and filtering by providing a custom function are covered.
Recordset Indexer Plugin Shows how to create and access hash tables on Recordset. Tables are kept in sync through events fired by Recordset.

Resize

Simple Resize Resize a node.
Constrain a Resize 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 Resize This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.
Widget with simple Resize Plugin Plugs a widget with resize functionality.
Widget with Resize Plugin under constraints Plugs a widget with resize functionality, and implements ResizeConstrained

Rich Text Editor

Using the Editor's instance Use the Editor's instance to query the iframe
Editor Events Using the Editor's built in events.
NodeChange Event Using the Editor's nodeChange Event.
ExecCommands Creating and using your own ExecCommands
Using the InlineEditor's instance Use the InlineEditor's instance to query the content editable section
InlineEditor Events Using the InlineEditor's built in events.
InlineEditor's NodeChange Event Using the InlineEditor's nodeChange Event.
InlineEditor ExecCommands Creating and using your own ExecCommands

Sortable

Simple Sortable List Create a simple sortable list.
Floated List Sortable list example with floated nodes.
Multiple Lists Multiple Sortable Lists that are separate from one another.
Multiple Lists - Full Join Multiple Sortable Lists that are fully joined together.
Multiple Lists - Outer Join Multiple Sortable Lists that are outer joined together.
Multiple Lists - Inner Join Multiple Sortable Lists that are inner joined together.
Fish Sort - Multi Outer Join A fish sorting example. Multiple sortable lists with floated nodes that are outer joined together.
Sortable Events Create a sortable list with drag-and-drop notifications.

StyleSheet

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

Transition

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

Uploader

Simple Multiple Files Uploader with Progress Tracking A simple multiple file uploader with progress tracking
Multiple Files Uploader with HTML5 Drag-and-Drop Support A multiple file uploader with HTML5 Drag-and-Drop Support
Multiple Files Uploader with POST Variables and Server Data Retrieval A multiple file uploader that submits additional POST vars with each file and receives data from the server

YQL Query

Simple YQL Query Create a simple YQL Query to retrieve data from the Yahoo! Weather YQL table.
Reusing a YQL query Use the Flickr Recent Photos YQL table to pull in a small set of recent Flickr images every 8 seconds.

Widgets

AutoComplete

Basic Local Data How to provide autocomplete suggestions from a local array.
Remote Data via JSONP How to provide autocomplete suggestions using a remote JSONP source.
Remote Data via YQL How to provide autocomplete suggestions using a YQL query source.
Remote Data via DataSource How to provide autocomplete suggestions using a DataSource instance.
Tag Completion Using Query Delimiters How 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 a Page How to use autocomplete-base to filter a set of existing items on a page.
Address Completion on Google's Geocoding Service How to find an address using a YQL source calling Google's Geocoding Service

Button

Styling elements with cssbutton This example shows how you can easily style button and non-button DOM elements to appear as buttons
Enhancing <button> nodes with button-plugin This example shows a simple, light solution to enhance <button> nodes
Basic button widgets This example demonstrates how to create button widgets
Managing groups of buttons with button-group This example demonstrates how to create a widget containing a group of buttons

Calendar

Simple Calendar with Selection How to create a single-pane calendar with selectable dates
Two-Pane Calendar with Custom Rendering and Multiple Selection How to create a multi-pane calendar with custom-rendered cells and multiple date selection.

Charts

Basic Charts Implementation Shows how to use Charts to create a basic chart.
Chart with Multiple Series Shows how to create a chart with multiple series.
Specify Chart Type Shows how to create a column chart with multiple series.
Create Stacked Chart Shows how to create a column chart with a stacked numeric axis.
Create a Chart with a Time Axis Shows how to create a chart with a time axis.
Add Gridlines to a Chart Shows how to add gridlines to a chart.
Create a Stacked Area Chart with Planar Based Events Shows how to create a chart with planar based events.
Customize a Chart Shows how to use a chart's styles attribute to customize a chart.
Customize a Chart's Tooltip Shows how to customize the default tooltip of a chart.
Define a Chart's Axes and Series Shows how to explicitly define the axes and series for a chart.
Pie Chart Shows how to use charts to create a pie chart.
Dual Axes Chart Shows how to create a chart with multiple value axes.
Update Chart Axis Shows how to access a chart instance's value axis after the chart has rendered.
Update Chart Series Shows how to access a chart instance's seriesCollection after the chart has rendered.
Create Chart with a Legend Shows how to add a legend to a chart.
Group Marker Chart Shows how to render multiple data points in a singe marker.

DataTable

Basic DataTable This example illustrates simple DataTable use cases.
DataTable + DataSource.Get + JSON Data DataTable loaded with JSON data from a remote webservice via DataSource.Get
DataTable + DataSource.IO + XML Data DataTable loaded with XML data from a remote webservice via DataSource.IO.
Formatting Row Data for Display Custom format data for display.
Nested Column Headers DataTable with nested column headers.
Column Sorting DataTable with column sorting.
Scrolling DataTable DataTable with vertical and/or horizontal scrolling rows.
Sortable generated columns Using DataTable's recordType attribute to create calculated, sortable columns.
Master and detail tables Populating one DataTable from details in the data of another.
Checkbox select column Checkbox column that retains checked state when sorting.
DataTable with Paginator Using the paginator.

Dial

Basic Dial Create a Dial from existing markup on the page - a simple use case.
Dial Linked With Text Input Link a Dial with a text input field.
Dial With Image Background Use image backgrounds to control the visual display of a Dial.
Dial With a Surrounding Image Use images to surround a Dial instance and provide additional styling.
Dial With Interactive UI This example employs Dial to drive an interactive UI.
Image Sprite Animation with Dial This example shows how to use Dial to animate an image sprite.

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

Overlay

Basic XY Positioning Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.
Simple Tooltip Shows how to create a simple tooltip incorporating the overlay shim feature.
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.

Panel

Creating a Modal Form Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.
Creating an Animated Panel Shows how to create a panel that animates as it is shown and hidden
Creating a Reusable Dialog Shows how to create a dialog instance that can be reused for multiple messages and confirmations.

ScrollView

Basic ScrollView Without a Scroll Indicator This example creates a basic ScrollView which doesn't include a scrollbar 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 ScrollView This example creates a horizontal ScrollView.
ScrollView With Pagination This example creates a horizontal ScrollView with pagination support.

Slider

Basic Sliders The basics of setting up a horizontal and vertical Slider
Creating a Slider from Existing Markup Creating a vertical 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 a YQL plugin.