Official YUI Examples
The YUI Library 3.x ships with a series of 101 examples that illustrate the implementation of its components. The examples can be starting points for your exploration, code snippets to jump-start your own programming, or simply inspiration as to how various interaction patterns can be enabled in the web browser via YUI.
This page allow you to explore these examples component-by-component; on this page you'll find the full index of library examples with the link and short description of each.
YUI 3 Core
Event | |
|---|---|
| Simple DOM Events | Use the Event Utility to attach simple DOM event handlers. |
| Using 'available', 'contentready', and 'domready' | Event Utility gives you control over when you execute your scripts. In addition to the window's load event, Event Utility lets you know when an element is available, when its children are available, and when the page's full DOM is available. |
| Using Custom Events | Use the Event Utility to create Custom Events that are bubbleable, preventable, cancelable and much more. |
| Using the 'focus' and 'blur' custom events | Using the ClassNameManager Utility and the Event Utility's focus and blur custom events to skin checkboxes. |
Node | |
|---|---|
| Node Basics | Using selectors and property accessors with Node. |
| DOM Methods | Using DOM methods. |
| Node Events | Using events with Node instances. |
| NodeList | NodeList provides Node functionality for multiple nodes. |
| Delegating Node Events | Using a single event listener to handle events on multiple nodes. |
| Measuring the Window and Document | This example demonstrates how to measure the window and document. |
| Node Positioning | This example demonstrates how to position an element in page coordinates. |
| Node Styling | This example demonstrates how to set styles and get style information. |
The YUI Global Object | |
|---|---|
| YUI Core | YUI Core |
| Load All Modules | Load All Modules |
| Multiple Instances | Working with multiple YUI instances. |
| YUI 2.x and 3.x | Working with YUI 2.x and 3.x. |
| YUI Loader - Dynamically Adding YUI and External Modules | On-demand loading of YUI and non-YUI assets |
Create Class Hierarchies with extend | Create class hierarchies with extend |
Compose Classes of Objects with augment | Creating a composition-based class structure using augment |
Add Behaviors to Objects with mix | Add behaviors to objects or static classes with mix |
Combine Data Sets with merge | Combine data sets and create shallow copies of objects with merge |
Check Data Types with Lang | Check data types with the Lang Utilities |
Browser Detection with UA | Get information about the current user agent with UA |
YUI 3 Utilities
Animation | |
|---|---|
| Basic Animation | Creating and using a simple animation. |
| Animation Easing | The Animation Utility allows you to implement 'easing effects' — for example, when an animation gradually slows down as it nears completion, that's an easing effect known as 'ease-in'. This example shows you how to use easing effects with your animations. |
| Animating Colors | Color animations can be effective indicators of state during the lifespan of a dynamic page. This example shows you how to animate color attributes of an element. |
| Alternating Iterations | The direction attribute can be used to reverse the animation on alternate iterations. |
| Animating XY Position | This example shows you how to animate the xy coordinates of an element. |
| Animating Along a Curved Path | This example demonstrates animating an element along a curved path using bezier control points. |
| Animated Scrolling | This example shows how to animate the scrolling of an element. |
| Reversing an Animation | The reverse attribute allows you to change the run direction of an animation. |
| Using the End Event | This example demonstrates how to use the end event. |
Chaining Animations Using the end Event | Animations can be chained (set to fire sequentially) using Animation's end event. |
Cookie | |
|---|---|
| Simple Cookie Example | Demonstrates basic usage of the Cookie utility for reading and writing cookies. |
| Advanced Cookie Example | Demonstrates using the Cookie utility to get, set and remove cookies. |
| Subcookie Example | Demonstrates using the Cookie utility to get and set subcookies. |
Drag & Drop | |
|---|---|
| Simple Drag | This example shows a simple drag interaction that doesn't require a drop interaction. |
| Drag Node Plugin | This example shows using the Drag Node Plugin. |
| Proxy Drag | This example shows a simple proxy drag interaction that doesn't require a drop interaction. |
| Drag Constrained to a Region | This example shows how to constrain a draggable Node to another Nodes region. |
| Interaction Groups | Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation. |
| Using the Drag Shim | This example shows the use of the drag shim when dragging nodes over other troublesome nodes. |
| List reorder w/Bubbling | This example shows how to make a sortable list using Custom Event Bubbling. |
| Portal Style Example | Portal style example using Drag & Drop Event Bubbling and Animation. |
| Animated Drop Targets | This example will show you how to make an animated node a Drop target. |
| Drop Based Coding | This example shows how to use the Drop Target events to code your application. |
Get | |
|---|---|
| Getting a Script Node with JSON Data | This example illustrates the simple use case in which the Get Utility is used to retrieve JSON data from a web service. |
IO | |
|---|---|
| GET Transaction | Explores the use of HTTP GET to request data from the server, and handling the transaction lifecycle using events. |
| POST Transaction | Explores the use of HTTP POST to send data to the server and retrieve the server's response. |
| XML Transaction — Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy | Demonstrates how to retrieve XML data from a web service and make use of that information within the page. |
| Cross-Domain JSON Transaction — Retrieving a News Feed from Yahoo! Pipes | Fetch a cross-domain, JSON-formatted RSS news feed directly from Yahoo! Pipes. |
JSON | |
|---|---|
| JSON with Y.io | Use JSON to parse data received from Y.io calls |
| Rebuilding class instances from JSON data | Using the replacer and reviver parameters to reconstitute object instances |
| Adding new object members during parsing | Using a currency conversion calculation to add a new price member to a JSON response |
Queue | |
|---|---|
| Building a UI with Queue | Using Queue to incrementally construct an application interface |
YUI 3 Component Infrastructure
Attribute | |
|---|---|
| Basic Configuration | Use the Attribute API to define, set and get attribute values. |
| Change Events | How to listen for changes in attribute values. |
| Custom Getters, Setters and Validators | Add custom methods to get and set attribute values and provide validation support. |
| Value Clone Configuration | Specify how attributes should be cloned, when returning values through get. |
| readOnly and writeOnce Configuration | Configure attributes to be readOnly or writeOnce. |
Plugin | |
|---|---|
| Basic Node Plugin | How to build a basic node plugin |
Widget | |
|---|---|
| Extending the base widget class | Shows how to extend the base widget class, to create your own Widgets. |
| Creating custom widget classes | Shows how to use Base.build to create custom Widget classes. |
| Creating a simple Tooltip widget | Shows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class. |
YUI 3 Widgets
Overlay | |
|---|---|
| Basic XY Positioning | Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support. |
| Extended XY Positioning | Shows how to use the Overlay's extended XY positioning support, to align the Overlay relative to another element, or the viewport. |
| Stack Support | Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page. |
| Standard Module Support | Shows how to modify content in the Overlay's header, body and footer sections. |
| IO Plugin | Shows how to create a simple plugin to retrieve content for the Overlay using the io utility. |
| Animation Plugin | Shows how to create a simple plugin to animate the Overlay's movement and visibility. |
Slider | |
|---|---|
| Basic Sliders | The basics of setting up a horizontal and vertical Slider |
| Creating a Slider from existing markup | Creating a horizontal Slider from existing markup |
YUI 3 Developer Tools
Console | |
|---|---|
| Creating a Console for debugging | The basics of setting up a Console |
| Filtering log messages | Using your YUI instance configuration to filter which messages are reported in the Console |
Profiler | |
|---|---|
| Simple Profiling Example | Demonstrates basic usage of the Profiler for profiling functions. |
| Object Profiling Example | Demonstrates usage of the Profiler for profiling objects. |
YUI Test | |
|---|---|
| Simple Testing Example | Demonstrates basic usage of YUI Test for setting up and running tests. |
| Advanced Test Options | Demonstrates how to use advanced testing features such as defining tests that should fail, tests that should be ignored, and tests that should throw an error. |
| Array Processing | Demonstrates how to use the ArrayAssert object to test array data. |
| Asynchronous Testing | Demonstrates basic asynchronous tests. |
| Asynchronous Event Testing | Demonstrates using events with asynchronous tests. |
YUI 3 CSS Foundation
CSS Base | |
|---|---|
| Global (Page-Level) Example | When CSS Base is included in a page it provides consistent and basic cross-browser styling for HTML elements. |
| Contextual Example | CSS Base applied to a portion of a page based on the location of a class value. |
CSS Fonts | |
|---|---|
| Global (Page-Level) Example | When CSS Fonts is included in a page, it applies a baseline font treatment to all HTML elements. This baseline is Arial at the equivalent of 13px size and 16px line-height. |
| Contextual Example | Use the alternate contextual version of YUI Fonts to have precise control over which regions of the page are targeted. |
| Setting Font Size | Define all non-baseline sizes in percentages when using YUI Fonts. |
| Setting Font Family | When using YUI Fonts, set font-family as you would normally. |
CSS Grids | |
|---|---|
| Available Page Widths | Choose a preset page width. Choose fluid or fixed widths. |
| Customize the Page Width | Customization is easy when you need a specific page width. |
| Available Preset Templates | Two-column page layouts |
| Nesting Grids | Use nesting grids to define sub-regions |
CSS Reset | |
|---|---|
| Global (Page-Level) Example | When CSS Reset is included in a page, it removes the browser-provided styling for HTML elements. |
| Contextual Example | CSS Reset applied to a portion of a page based on the location of a class value. |
YUI 3 Node Plugins
MenuNav Node Plugin | |
|---|---|
| Basic Left Nav | Creating left navigation using the MenuNav Node Plugin |
| Basic Top Nav | Creating top navigation using the MenuNav Node Plugin |
| Menu Button Top Nav | Creating menu button navigation using the MenuNav Node Plugin |
| Split Button Top Nav | Creating split button navigation using the MenuNav Node Plugin |
| Left Nav With Submenus With Shadows | Adding shadows to submenus of a left nav using the MenuNav Node Plugin |
| Left Nav With Submenus With Rounded Corners | Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin |
| Skinning Menus Created Using the MenuNav Node Plugin | Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr |
| Adding Submenus On The Fly | Building Submenus On The Fly Using the MenuNav Node Plugin with the IO Utility |
