Official YUI Examples
The YUI Library 3.x ships with a series of 67 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 Utility |
|---|
| Simple DOM Events | Use the Event Utility to attach simple DOM event handlers. |
| Using onAvailable, onContentReady, and event:ready | 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. |
YUI 3 Component Infrastructure
YUI 3 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 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. |
Drag & Drop Utility |
|---|
| 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. |
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 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. |
