YUI Library: Index of Official Examples

Every YUI Library component ships with a series of 191 examples that illustrate its implementation. These examples can serve as starting points for your exploration of YUI, as code snippets to get you started in your own programming, or simply as an inspiration as to how various interaction patterns can be enabled in the web browser via YUI.

The navigation controls on the left side of this page allow you to explore these examples component-by-component; on this page you'll find the full index of library examples with a link to and short description of each one.

CSS Foundation

Base CSS
Basic Test Suite for YUI Base	YUI Base CSS provides a consistent and legible rendering of HTML elements; this example gives you a straightforward look at how Base styles common HTML elements.
YUI Base, 750px	Base CSS and the full YUI CSS Foundation in a 750px-wide YUI CSS Grid.
YUI Base, 950px	Base CSS and the full YUI CSS Foundation in a 950px-wide YUI CSS Grid.
YUI Base, 974px	Base CSS and the full YUI CSS Foundation in a 974px-wide YUI CSS Grid.
YUI Base, 100%	Base CSS and the full YUI CSS Foundation in a 100%-of-page-width YUI CSS Grid.

Fonts CSS
Basic Test Suite for YUI Fonts	Put Fonts on a page to achieve consistent font-styling and line-height characteristics.
Setting the font size	Use percentages to specify font sizes when using YUI Fonts.
Setting the font family	Specify the font family you want and let YUI Fonts handle alternative fallback font-families.

Grids CSS
Page Width = 750px	Use Grids' preset page width of 750px.
Page Width = 950px	Use Grids' preset page width of 950px.
Page Width = 974px	Use Grids' preset page width of 974px.
Page Width = 100%	Use Grids' preset page width of 100%.
Custom Page Width	Shows how to specify an arbitrary page width.
Preset Template 1, 160px left	Use Grids' preset templates to put a 160px narrow column on the left side.
Preset Template 2, 180px left	Use Grids' preset templates to put a 180px narrow column on the left side.
Preset Template 3, 300px left	Use Grids' preset templates to put a 300px narrow column on the left side.
Preset Template 4, 180px right	Use Grids' preset templates to put a 180px narrow column on the right side.
Preset Template 5, 240px right	Use Grids' preset templates to put a 240px narrow column on the right side.
Preset Template 6, 300px right	Use Grids' preset templates to put a 300px narrow column on the right side.
Standard Nesting Grid (1/2 - 1/2)	The buiding block of nested grids is the Standard Nesting Grid which creates to evenly-wide child columns. Learn how in this example.
Special Nesting Grid "B" (1/3, 1/3, 1/3)	What you need an odd number of columns, or unevenly divided space, use Special Nesting Grids instead of Standard Nesting Grids.
Special Nesting Grid "C" (2/3, 1/3)	Create two uneven columns with this Special Nesting Grid.
Special Nesting Grid "D" (1/3, 2/3)	Create two uneven columns with this Special Nesting Grid.
Special Nesting Grid "E" (3/4, 1/4)	Create two uneven columns with this Special Nesting Grid.
Special Nesting Grid "F" (1/4, 3/4)	Create two uneven columns with this Special Nesting Grid.
Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4)	Create more than 2 (or 3) columns by nesting grids. This example shows a four-column even-width layout achieved by nesting Standard Nesting Grids inside of Standard Nesting Grids.

Reset CSS
Basic Test Suite for YUI Reset	YUI Reset is the lowest-level member of YUI's CSS suite. It normalizes the rendering of HTML elements and provides a level playing field upon which to write CSS.

YUI Utilities

Animation Utility
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 From a Given Value	Animations usually begin with the current value (e.g., a motion animation usually begins with the current position of the moving element). However, the starting position can be customized; this example shows you how.
Using Custom Units for an Animation	By default, animations are set in terms of a property's default units (often pixels or percent). This example shows you how to specificy custom units with Animation.
Animating Multiple Attributes	This example demonstrates how to animate multiple attributes of an HTMLElement.
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 HTMLElement.
Animating Motion	This example shows you how to animate the motion path of an HTMLElement.
Animating Along a Curved Path	This example explores motion animation by moving an HTMLElement along a curved path using control points.
Animated Scrolling	This example shows how to animate the scrolling of an HTMLElement.

Browser History Manager (beta)
Simple Navigation Bar	Use the Browser History Manager to "ajaxify" a simple navigation bar without compromising the use of the back/forward buttons.
Calendar Control	Go from month to month using the controls on the calendar widget and go back to previously viewed months using the browser's back button.

Connection Manager
Connection Manager GET Transaction	Uses Connection Manager to demonstrate an HTTP GET request.
Connection Manager POST Transaction	Explores the use of HTTP POST to send data to the server and retrieve the server's response.
Connection Manager Transaction Timeout	Connection Manager's built-in transaction timeout feature allows you to abort requests that are too slow in returning data.
Retrieving a Yahoo! Weather RSS Feed	Demonstrates how to retrieve XML data from a web service and make use of that information within the page.
Subscribing to Connection Manager Global Events	Subscribe to Custom Events for an aspect-oriented approach to managing transactions and response data.
Subscribing to Connection Manager's Custom Events via the Callback Object	Target and handle Custom Events for specific transactions using the callback object.

Dom Collection
Using setXY	Positioning elements relative to the document coordinate system can be quite a challenge. The Dom Utility provides this method to do it for you.
Using getXY	Getting element positions relative to the document coordinate system can be quite a challenge. The Dom Utility provides this method to do it for you.
Using setStyle	There are some differences between browsers regarding how style properties are set on HTMLElements. This method normalizes those for you.
Using getStyle	There are some differences between browsers regarding how style properties are retrieved from HTMLElements. This method normalizes those for you.
Using hasClass	This method allows you to test for the presence of a className on an HTMLElement.
Using addClass	This method allows you to add a className to an HTMLElement.
Using removeClass	This method allows you to remove a className from an HTMLElement.
Using getElementsByClassName	This method allows you select all of the HTMLElements on a given page that share a specific className.

Drag & Drop
Basic Drag and Drop	This example demonstrates the basics of drag and drop.
Drag and Drop Handles	This examples shows how to define drag handles.
Drag and Drop with the Dragged Element on Top	Demonstrates how to use Drag & Drop's event API to force a dragged element to draw on top of the other drag-and-drop elements.
Drag and Drop using a Proxy Element	Demonstrates the built-in proxy-drag feature of drag and drop.
Using Drag and Drop to Reorder a List	Demonstrates how to use drag and drop to reorder a list.
Drag and Drop Interaction Groups	Demonstrates how to use multiple drag-and-drop interaction groups.
Drag and Drop - Resizable Panel	Demonstrates one way to implement a draggable panel.
Drag and Drop - Custom Click Validator	Demonstrates one way to implement a draggable panel.

Event Utility
Simple Event Handling and Processing	Demonstrates simple event attachment and use of Event Utility to provide browser-neutral methods for acting on event objects.
Using Custom Events	Custom Events are an excellent way to publish and subscribe to interesting moments in your own scripts.
Using onAvailable, onContentReady, and onDOMReady	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 Event Utility and Event Delegation to Improve Performance	Assigning events to parent elements allows you to listen for those same events on descendant elements, reducing the number of event listeners you need in your application.

ImageLoader Utility (experimental)
Basic Features of the ImageLoader Utility	Demonstrates the basic features and operation of the ImageLoader Utility, deferring the loading of images until specific targets are hit or specific timers 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.
ImageLoader with TabView	Using ImageLoader with the TabView Control and determining which triggers to set for image groups.

YUI Loader Utility (beta)
Using YUI Loader to Load the Calendar Control	This example demonstrates a simple implementation in which we bring in the YUI Calendar Control — and its JavaScript and CSS dependencies — using the YUI Loader Utility.
Using YUI Loader to Place Additional Components on a Page	In some cases, you may wish to use YUI Loader to bring additional components into a page that already contains some YUI content. In this example, we'll look at how to use YUI Loader to augment a page's existing YUI content by bringing in additional dependencies for a new component.
Using addModule to Add Custom (Non-YUI) Content with YUILoader	YUILoader can be used to add YUI components to the page, but it can also be used to add other components that you create yourself (or that you pull from a third-party source). This example shows one simple way to pull in external content with YUILoader.

YUI Test Utility (beta)
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.

YUI Widgets

AutoComplete Control
Query a JavaScript Array for In-memory Data	Demonstrates the use of a manageably large JavaScript array to provide responsive, in-memory AutoComplete functionality without relying on a server-side component.
Query a JavaScript Function for In-memory Data	Demonstrates the use of a custom function to process in-memory data and provide rapid AutoComplete responses without relying on a server-side component.
Use AutoComplete to access the Yahoo! Search JSON API	Illustrates the use of AutoComplete with a web service returning JSON data.
Use AutoComplete to access the Yahoo! Search XML API	Illustrates the use of AutoComplete with a web service returning XML data.
Use AutoComplete to access flat-file data from a web service	Illustrates the use of AutoComplete with a web service returning flat-file data via a custom PHP script.
Use AutoComplete with Flickr's XML Webservice	Illustrates the use of AutoComplete with an XML-based webservice and the inclusion of images in the suggestion container.
Configurations Dashboard	An interactive dashboard that allows you to manipulate many of AutoComplete's built-in configuration options and explore the impact of those changes on the UI.
Skinning Model	Explanation of AutoComplete's skinning model.

Button Control (beta)
Push Buttons	This example explores various ways to create a Push Button.
Link Buttons	Link Buttons function like HTML anchor elements; this example shows you several ways to create Link Buttons.
Checkbox Buttons	This example demonstrates different ways to create a Button that functions like an HTML checkbox.
Radio Buttons	This example demonstrates different ways to create a Button that functions like an HTML radio button.
Submit Buttons	This example demonstrates different ways to create a Button that functions like an HTML submit button.
Reset Buttons	This example demonstrates different ways to create a Button that functions like an HTML reset button.
Menu Buttons	With the inclusion of the optional Menu Control, it is possible to create Buttons that incorporate a menu; this example shows you how.
Split Buttons	Split Buttons are a hybrid of Menu Buttons and standard buttons; this example shows you how to use the Button Control to create Split Buttons.

Calendar Control
Quickstart Tutorial	Quickly get up and running with the most basic Calendar.
Multi-Select Calendar	Set up a Calendar that allows for the selection of one or more dates, rather than the single-select default.
Multi-Page Calendar	Setting up a CalendarGroup to display more than one month at a time.
Minimum/Maximum Dates	Configure the Calendar to disallow selection before or beyond specified date limits.
Handling Calendar Events	Use Calendar's events to react to various interesting moments, such as the selection or deselection of dates.
Calendar and Text Fields	Populate a form's text input field using the Calendar's selected date and vice versa.
Calendar and Select Fields	Populate a series of form select input fields using the Calendar's selected date and vice versa.
Using the Render Stack	Customize how specific dates or date ranges are rendered by plugging in custom renderers.
Popup Calendar	Configure either Calendar or CalendarGroup for use as a popup layer that is displayed above the document.
Localization - Germany	Use localization features to customize the Calendar for use in Germany.
Localization - Japan	Use localization features to customize the CalendarGroup for use in Japan.
Skinning The Calendar	YUI has a default skin for it's controls called "Sam Skin". This example shares the CSS rules which make up "Sam Skin" for the Calendar and CalendarGroup controls.

Color Picker Control (beta)
Inline Color Picker Control from Script	This example demonstrates the use of an inline Color Picker instance built entirely with JavaScript.
Example of Color Picker Built in a Dialog via JavaScript	Color Picker interactions commonly call for the picker to be displayed as part of a floating dialog window; this example demonstrates how to create such an implementation while building the Color Picker's DOM structure via JavaScript.
Example of Color Picker Built in a Dialog from Markup	Color Picker interactions commonly call for the picker to be displayed as part of a floating dialog window; this example demonstrates how to create such an implementation while placing the Color Picker's DOM structure on the page prior to instantiating the picker.
Example of Specifying Custom Labels and Element IDs for Color Picker	When you want to have multiple Color Pickers on the same page, or when you want to internationalize them, you'll need to customize element IDs and/or form-control labels. This example shows you how.
Skinning Example	Many YUI Controls have CSS "skins" that define their look and feel. The default skin for YUI is the Sam Skin. This example calls out the CSS used to skin the Color Picker control.

Container Family
The Module Control	The Module is a JavaScript representation of modular HTML content; all Container controls implement Module as a base class.
Creating and Positioning an Overlay	The Overlay class extends Module and creates a piece of modular content that floats above the page, outside of the page flow. In this example, we look at how to create and position an Overlay.
Simple Tooltip Example	Creating and styling a simple Tooltip.
One Tooltip, Many Context Elements	You can reuse the same Tooltip instance to provide Tooltip effects for many elements, conserving browser resources and improving performance along the way.
Simple Panel Example	This example implements two simple Panels, one from markup and one purely from script, and shows how to configure options like draggability.
Skinning a Panel with Custom CSS: Introduction	In this example, we explore simple techniques for using CSS to customize the look and feel of a Panel Control instance.
Skinning a Panel with Custom CSS: Advanced	Building on the introductory skinning example, here we'll look at customizing mulitple Panel instances in the same document.
Creating a "Loading" Panel	This example shows how to use a Panel Control instance to display a "loading" or "please wait" message.
Creating a Resizable Panel	In this example, we look at how Panel can be combined with Drag and Drop to create resizable Panel Control instances.
Dialog Quickstart Example	This example demonstrates the most common use-case for the Dialog control — collecting data from the user and sending it to the server using XMLHttpRequest (Ajax) via the YUI Connection Manager.
SimpleDialog Quickstart Example	This example demonstrates the most common use-case for the SimpleDialog control — a control best used for simple ok/cancel or yes/no dialog forms.
Using ContainerEffect Transitions	The ContainerEffect object allows you to implement built-in transitions to fade-in/out or slide-in/out your Containers as they show and hide.
Using the Overlay Manager to Manage Multiple Panels	Overlay Manager makes it easy to manage the interaction of many Panels within the same window, giving focus to the window that is selected and keeping its z-index higher than that of its peers.
Implementing Container Keyboard Shortcuts with KeyListener	The KeyListener class, included with the Event Utility, makes it easy to tie keyboard shortcuts to specific actions in your application.

DataTable Control (beta)
Basic Example	A demonstration of the DataTable's basic feature set.
Progressive Enhancement	A progressively enhanced DataTable based on existing markup.
Custom Cell Formatting	Custom formatting for DataTable cells.
Nested headers	Nested column headers.
JSON Data Over XHR	The display of tabular JSON data retrieved via XHR.
XML Data Over XHR With POST	The display of XML data retrieved via an XHR POST request.
Textual Data Over XHR	The display of textual retrieved over XHR
Local XML Data	The display of XML data placed locally within the page.
Client-side Pagination	The use of client-side pagination to break up a dataset into manageable, page-sized chunks.
Client-side Sorting	Client-side Column sort using a custom function.
Server-side Pagination	Pagination handled by a server.
Server-side Sorting	Sorting handled by a server.
Server-side Pagination and Sorting, with Browser History Manager	Integration of server-side pagination and sorting, integrated with the Browser History Manager.
Fixed Scrolling	Scrolling with fixed column headers.
Row Selection	Row selection models.
Cell Selection	Cell selection models.
Inline Cell Editing	Implementing inline cell editing.
Context Menu Integration	Integration of DataTable with the the Menu Control's ContextMenu feature.
Complex Example of Multiple Features	Several features combined into one DataTable.
Skinning Model	An explanation of DataTable's skinning model.

Logger Control
Basic Logging	Demonstrates basic logging functionality.
Configuring LogReader	LogReader configurations
Using LogWriter	Use LogWriter to write logs from a custom source.
Logger Integration with YUI Components	Point to the debug build of a YUI component to read built-in log messages with Logger.
Skinning Model	Explanation of Logger's skinning model.

Menu Family
Basic Menu From Markup	Basic Menu From Markup
Basic Menu From JavaScript	Basic Menu From JavaScript
Grouped Menu Items Using Markup	Grouped Menu Items Using Markup
Grouped Menu Items Using JavaScript	Grouped Menu Items Using JavaScript
Grouped Menu Items With Titles From Markup	Grouped Menu Items With Titles From Markup
Grouped Menu Items With Titles From JavaScript	Grouped Menu Items With Titles From JavaScript
Multi-tiered Menu From Markup	Multi-tiered Menu From Markup
Multi-tiered Menu From JavaScript	Multi-tiered Menu From JavaScript
Handling Menu Click Events	Handling Menu Click Events
Listening For Menu Events	Listening For Menu Events
MenuItem Configuration Properties	MenuItem Configuration Properties
Setting Menu Configuration Properties At Runtime	Setting Menu Configuration Properties At Runtime
Website Left Nav With Submenus Built From Markup	Website Left Nav With Submenus Built From Markup
Website Left Nav With Submenus From JavaScript	Website Left Nav With Submenus From JavaScript
Website Top Nav With Submenus Built From Markup	Website Top Nav With Submenus Built From Markup
Website Top Nav With Submenus From JavaScript	Website Top Nav With Submenus From JavaScript
Website Left Nav Using Animation With Submenus Built From Markup	Website Left Nav Using Animation With Submenus Built From Markup
Website Left Nav Using Animation With Submenus From JavaScript	Website Left Nav Using Animation With Submenus From JavaScript
Website Top Nav Using Animation With Submenus Built From Markup	Website Top Nav Using Animation With Submenus Built From Markup
Website Top Nav Using Animation With Submenus From JavaScript	Website Top Nav Using Animation With Submenus From JavaScript
Context Menu	Context Menu
Adding A Context Menu To A Table	Adding A Context Menu To A Table
Adding A Context Menu To A TreeView	Adding A Context Menu To A TreeView
OS-Style Programs Menu	OS-Style Programs Menu
Application Menubar	Application Menubar

Rich Text Editor (beta)
Flickr Image Search	This example adds a button that opens a custom panel containing an AutoComplete Control that can be used to retrieve photos from Flickr.
Calendar Plugin	This example adds a button to the Rich Text Editor's Toolbar that displays a Calendar control for choosing dates. It also demonstrates how to manage the state of a custom button.
Icon Insertion	This example adds a button that opens a custom panel to insert custom icons.
Plain Text Switcher	This example demonstrates how to toggle from a plain text field to the Rich Text Editor with a simple button click.
Editor Data Post with Connection Manager	This example posts data to the server with Connection Mananger and returns filtered data.
Skinning the Editor	Editor skinning is done via CSS. The Editor comes with a default skin, but you can extend or override this as needed.

Slider Control
Basic Vertical Slider	This example demonstrates how to create a simple slider, how to consume the values it produces when a user interacts with the control, and how to programmatically update the slider's state.
Horizontal Slider with Tick Marks	This example implements a slider with tick marks.
RBG Slider Control	This example demonstrates how to use the slider as a building block for a more complex widget. It employs three slider instances that work together to produce RGB values.

TabView Control
Build from Markup	How build a TabView widget from markup.
Build from Script	How to build a TabView widget from script.
Adding Tabs	This demonstrates how to dynamically add tabs.
Removing Tabs	This demonstrates how to dynamically remove tabs.
Getting Content from an External Source	This demonstrates how to load Tab content from an external source.
Skinning TabView	TabView skinning is done via CSS. The TabView comes with a default skin, but you can extend or override this as needed.

TreeView Control
Default TreeView	This example creates a simple tree with default settings and randomly populates its nodes.
Dynamically Loading Node Data	You can improve the rendering time of your TreeView control by deferring the loading of child nodes until they are requested. When a node expands, you can use the YUI Connection Manager to retrieve information via XMLHttpRequest about that node's children.
Folder-Style TreeView Design	By using an alternative CSS file, you can modify the appearance of the TreeView Control; in this example, the TreeView implements a folder-style iconography.
Menu-Style TreeView Design	By using an alternative CSS file, you can modify the appearance of the TreeView Control; in this example, the TreeView implements a menu-style iconography. It also makes use of the Menu Node, in which only one child at each depth level can remain open.
Using TreeView with Custom Icons	Applying a specific label style to each node allows you to customize the icons that each node displays.