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

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.

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.

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.

Cookie Utility
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.
Drag - Handles on an Panel	Using drag handles on a Panel, this example demonstrates how to use drag handles to allow dragging of a Panel with content by the Panel title area.
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.

Rich Text Editor

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.

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.

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

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.
Color Sorting and Filtering	Color Sorting with DataTable and Y.Color.
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.