Yahoo! User Interface Library (YUI): Index of Library Examples

YUI Library: Index of Official Examples

Every YUI Library component ships with a series of 275 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 BaseYUI 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, 750pxBase CSS and the full YUI CSS Foundation in a 750px-wide YUI CSS Grid.
YUI Base, 950pxBase CSS and the full YUI CSS Foundation in a 950px-wide YUI CSS Grid.
YUI Base, 974pxBase 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 FontsPut Fonts on a page to achieve consistent font-styling and line-height characteristics.
Setting the font sizeUse percentages to specify font sizes when using YUI Fonts.
Setting the font familySpecify the font family you want and let YUI Fonts handle alternative fallback font-families.

Grids CSS

Page Width = 750pxUse Grids' preset page width of 750px.
Page Width = 950pxUse Grids' preset page width of 950px.
Page Width = 974pxUse Grids' preset page width of 974px.
Page Width = 100%Use Grids' preset page width of 100%.
Custom Page WidthSpecify an arbitrary page width.
Preset Template 1, 160px leftUse Grids' preset templates to put a 160px narrow column on the left side.
Preset Template 2, 180px leftUse Grids' preset templates to put a 180px narrow column on the left side.
Preset Template 3, 300px leftUse Grids' preset templates to put a 300px narrow column on the left side.
Preset Template 4, 180px rightUse Grids' preset templates to put a 180px narrow column on the right side.
Preset Template 5, 240px rightUse Grids' preset templates to put a 240px narrow column on the right side.
Preset Template 6, 300px rightUse 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 ResetYUI 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's Core JavaScript Components

Dom Collection

Using setXYPositioning elements relative to the document coordinate system can be quite a challenge. The Dom Utility provides this method to do it for you.
Using getXYGetting 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 setStyleThere are some differences between browsers regarding how style properties are set on HTMLElements. This method normalizes those for you.
Using getStyleThere are some differences between browsers regarding how style properties are retrieved from HTMLElements. This method normalizes those for you.
Using hasClassThis method allows you to test for the presence of a className on an HTMLElement.
Using addClassThis method allows you to add a className to an HTMLElement.
Using removeClassThis method allows you to remove a className from an HTMLElement.
Using getElementsByClassNameThis method allows you select all of the HTMLElements on a given page that share a specific className.

Event Utility

Simple Event Handling and ProcessingDemonstrates simple event attachment and use of Event Utility to provide browser-neutral methods for acting on event objects.
Using Custom EventsCustom Events are an excellent way to publish and subscribe to interesting moments in your own scripts.
Using onAvailable, onContentReady, and onDOMReadyEvent 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 PerformanceAssigning 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.

YAHOO Global Object

Type-Checking Your DataUse the YAHOO.lang type checking methods to deal with unpredictable data
User Agent DetectionYAHOO.env.ua can tell you with some accuracy which browser your page is being viewed in.
Creating Class Hierarchies with YAHOO.lang.extendLeverage class inheritance in an object-oriented architecture.
Creating a Composition-Based Class Structure Using YAHOO.lang.augmentProtoUse YAHOO.lang.augmentProto to help modularize class behaviors.
Add Behavior to Objects or Static Classes with YAHOO.lang.augmentObjectUse augmentObject to extend static classes, object literals, or class instances.
Combining Simple Data Sets with YAHOO.lang.mergeMerge several objects, creating a unique set.

YUI Utilities

Animation Utility

Basic AnimationCreating and using a simple animation.
Animation EasingThe 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 ValueAnimations 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 AnimationBy 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 AttributesThis example demonstrates how to animate multiple attributes of an HTMLElement.
Chaining Animations Using onCompleteAnimations can be chained (set to fire sequentially) using Animation's onComplete custom event; this simple example shows you how.
Animating ColorsColor 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 MotionThis example shows you how to animate the motion path of an HTMLElement.
Animating Along a Curved PathThis example explores motion animation by moving an HTMLElement along a curved path using control points.
Animated ScrollingThis example shows how to animate the scrolling of an HTMLElement.

Browser History Manager (beta)

Simple Navigation BarUse the Browser History Manager to "ajaxify" a simple navigation bar without compromising the use of the back/forward buttons.
TabView ControlThe Browser History Manager is used here to remember which tabs have been visited.
Calendar ControlGo from month to month using the controls on the calendar widget and go back to previously viewed months using the browser's back button.
Multiple ModulesThis example shows how to use the Browser History Manager with several modules on a page.

Connection Manager

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

Cookie Utility (beta)

Simple Cookie ExampleDemonstrates basic usage of the Cookie utility for reading and writing cookies.
Advanced Cookie ExampleDemonstrates using the Cookie utility to get, set and remove cookies.
Subcookie ExampleDemonstrates using the Cookie utility to get and set subcookies.

Drag & Drop

Basic Drag and DropThis example demonstrates the basics of drag and drop.
Drag and Drop HandlesThis examples shows how to define drag handles.
Drag and Drop with the Dragged Element on TopDemonstrates 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 ElementDemonstrates the built-in proxy-drag feature of drag and drop.
Using Drag and Drop to Reorder a ListDemonstrates how to use drag and drop to reorder a list.
Drag and Drop Interaction GroupsDemonstrates how to use multiple drag-and-drop interaction groups.
Drag and Drop - Custom Click ValidatorDemonstrates one way to implement a draggable panel.
Drag and Drop - Staying in a RegionDemonstrates one way to implement dragging elements in a Region.

Get Utility

Getting a Script Node with JSON DataThis example illustrates the simple use case in which the Get Utility is used to retrieve JSON data from a web service.
Getting CSS Style SheetsAttach and remove stylesheets using the Get Utility.

ImageLoader Utility

Basic Features of the ImageLoader UtilityDemonstrates 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 FoldLoading images above the fold immediately while deferring the loading of images below the fold.
Using ImageLoader with CSS Class NamesUsing CSS class names to target specific images for deferred loading.
ImageLoader with TabViewUsing ImageLoader with the TabView Control and determining which triggers to set for image groups.

JSON Utility

JSON with Connection ManagerUse the JSON Utility to parse data received from Connection Manager calls

Resize Utility (beta)

Simple ResizeThis example shows how to make a DIV resizable.
Proxy ResizeThis example shows how to make a DIV resizable, using a proxy element.
Animated Proxy ResizeThis example shows how to make a DIV resizable, using a proxy element and animation.
8-way Element ResizeThis example shows how to make an element resizable by all 8 handles.
Ghosting and Custom Proxy ResizeThis example shows how to use ghosting and manipulate the proxy element.
Custom resizing for the Rich Text EditorThis example shows how to customize the Resize Utility for things like the Rich Text Editor.
Split Pane resizing with Grids CSSThis example shows how to make a resizable split pane with Grids CSS.
Skinning the Resize UtilityResize skinning is done via CSS. The Resize Utility comes with a default skin, but you can extend or override this as needed.

Selector Utility

Using queryThe query method retrieves an array of DOM elements that match the provided selector.
Using filterThe filter method filters a collection of nodes based on the provided selector.

YUI Loader Utility (beta)

Using YUI Loader to Load the Calendar ControlThis 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 PageIn 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 YUILoaderYUILoader 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.
Use YUILoader to list requirements for a set of components.Select one or more YUI components and see an optimized list of file includes.

YUI Widgets

AutoComplete Control

Query a JavaScript Array for In-memory DataDemonstrates 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 DataDemonstrates 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 APIIllustrates the use of AutoComplete with a web service returning JSON data.
Use AutoComplete to access the Yahoo! Search XML APIIllustrates the use of AutoComplete with a web service returning XML data.
Use AutoComplete to access flat-file data from a web serviceIllustrates the use of AutoComplete with a web service returning flat-file data via a custom PHP script.
Use AutoComplete with Flickr's XML WebserviceIllustrates the use of AutoComplete with an XML-based webservice and the inclusion of images in the suggestion container.
Proxyless AutoComplete pointing to the Yahoo! Search APIIllustrates the integration of AutoComplete with the YUI's Get Utility to achieve proxyless data retrieval through the use of dynamic script node insertions.
Configurations DashboardAn 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 ModelExplanation of AutoComplete's skinning model.

Button Control

Push ButtonsThis example explores various ways to create a Push Button.
Link ButtonsLink Buttons function like HTML anchor elements; this example shows you several ways to create Link Buttons.
Checkbox ButtonsThis example demonstrates different ways to create a Button that functions like an HTML checkbox.
Radio ButtonsThis example demonstrates different ways to create a Button that functions like an HTML radio button.
Submit ButtonsThis example demonstrates different ways to create a Button that functions like an HTML submit button.
Reset ButtonsThis example demonstrates different ways to create a Button that functions like an HTML reset button.
Menu ButtonsWith the inclusion of the optional Menu Control, it is possible to create Buttons that incorporate a menu; this example shows you how.
Split ButtonsSplit 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 Menu ButtonThis example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
Calendar Menu ButtonThis example demonstrates how to create a Menu Button whose Menu instance displays a Calendar and label reflects the selected date.
Color Picker ButtonThis example demonstrates how to render a Color Picker into the Menu of a Split Button.
Fixed Width Menu ButtonThis example demonstrates how to create a Menu Button whose text label has a fixed width.
Glowing ButtonThis example demonstrates how to skin a Button instance to create a glossy, glass-like effect with a glowing background reminiscent of Aqua buttons found in Mac OS X.
Slider ButtonThis example demonstrates how to combine a Split Button with a Slider to create an opacity slider button, similar to that found in Adobe Photoshop.

Calendar Control

Quickstart TutorialQuickly get up and running with the most basic Calendar.
Multi-Select CalendarSet up a Calendar that allows for the selection of one or more dates, rather than the single-select default.
Multi-Page CalendarSetting up a CalendarGroup to display more than one month at a time.
Minimum/Maximum DatesConfigure the Calendar to disallow selection before or beyond specified date limits.
Calendar NavigatorEnable the Calendar Navigator, to allow the user to jump straight to a specific month/year
Handling Calendar EventsUse Calendar's events to react to various interesting moments, such as the selection or deselection of dates.
Calendar and Text FieldsPopulate a form's text input field using the Calendar's selected date and vice versa.
Calendar and Select FieldsPopulate a series of form select input fields using the Calendar's selected date and vice versa.
Using the Render StackCustomize how specific dates or date ranges are rendered by plugging in custom renderers.
Popup CalendarConfigure either Calendar or CalendarGroup for use as a popup layer that is displayed above the document.
Localization - GermanyUse localization features to customize the Calendar for use in Germany.
Localization - JapanUse localization features to customize the CalendarGroup for use in Japan.
Calendar inside a ContainerThis example wraps Calendar in a Dialog control to provide positioning, button and potentially dragdrop support
Skinning The CalendarYUI 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.

Charts Control (experimental)

Charts Quickstart ExampleA demonstration of the Chart control's basic features.
Chart with Legend ExampleCreates a PieChart with an HTML legend.
Skinning a Chart ExampleModifies the Chart control's styles to give it a custom appearance.
Chart and DataTable ExampleA Chart and a DataTable share the same DataSource.
Chart with DataSource PollingA Chart polls a DataSource that frequently loads new data through XHR.

Color Picker Control

Inline Color Picker Control from ScriptThis example demonstrates the use of an inline Color Picker instance built entirely with JavaScript.
Example of Color Picker Built in a Dialog via JavaScriptColor 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 MarkupColor 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 PickerWhen 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 ExampleMany 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 ControlThe Module is a JavaScript representation of modular HTML content; all Container controls implement Module as a base class.
Creating and Positioning an OverlayThe 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 ExampleCreating and styling a simple Tooltip.
One Tooltip, Many Context ElementsYou can reuse the same Tooltip instance to provide Tooltip effects for many elements, conserving browser resources and improving performance along the way.
Simple Panel ExampleThis 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: IntroductionIn 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: AdvancedBuilding on the introductory skinning example, here we'll look at customizing mulitple Panel instances in the same document.
Creating a Modal "Loading" PanelThis example shows how to use a Panel Control instance to display a modal "loading" or "please wait" message.
Creating a Resizable PanelIn this example, we look at how Panel can be combined with the Resize utility to create resizable Panel Control instances.
Dialog Quickstart ExampleThis 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 ExampleThis 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 TransitionsThe 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 PanelsOverlay 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 KeyListenerThe KeyListener class, included with the Event Utility, makes it easy to tie keyboard shortcuts to specific actions in your application.

DataTable Control (beta)

Basic ExampleA demonstration of the DataTable's basic feature set.
Progressive EnhancementA progressively enhanced DataTable based on existing markup.
Custom Cell FormattingCustom formatting for DataTable cells.
Nested HeadersNested column headers.
JSON Data Over XHRThe display of tabular JSON data retrieved via XHR.
XML Data Over XHR With POSTThe display of XML data retrieved via an XHR POST request.
Textual Data Over XHRThe display of textual data retrieved over XHR
Local XML DataThe display of XML data placed locally within the page by Connection Manager.
Adding and Deleting RowsAdding and deleting rows with dynamic data.
Client-side PaginationThe use of client-side pagination to break up a dataset into manageable, page-sized chunks.
Client-side SortingClient-side Column sort using a custom function.
Server-side PaginationServer-side pagination using the Paginator widget.
Server-side SortingSorting handled by a server.
Server-side Pagination and Sorting, with Browser History ManagerIntegration of server-side pagination and sorting, integrated with the Browser History Manager.
XY-scrolling, Y-scrolling, and X-scrollingScrolling along x, y, or xy axes.
Row SelectionRow selection models.
Cell SelectionCell selection models.
Inline Cell EditingImplementing inline cell editing.
Context Menu IntegrationIntegration of DataTable with the the Menu Control's ContextMenu feature.
Showing, Hiding, and Reordering Columns.Showing, hiding, and reordering Columns.
Highlighting Cells, Rows, or ColumnsEnable highlighting on cells, rows, or columns
Complex Example of Multiple FeaturesSeveral features combined into one DataTable.
Datatable with AutocompleteUse an AutoComplete Control to filter Datatable results.
Skinning ModelAn explanation of DataTable's skinning model.
Configuring the PaginatorExhibition of Paginator instance configuration.

ImageCropper Control (beta)

Simple Crop InterfaceThis example shows how to make an image croppable.
Advanced Crop InterfaceThis example shows how to make an image croppable with some advanced features.
Real Time Crop FeedbackThis example shows how to use a few of the built in events to real time crop feedback.
Connection Manager assisted image cropThis example shows how to use Connection Manager to issue an image crop request.
Skinning the ImageCropperImageCropper skinning is done via CSS. The ImageCropper comes with a default skin, but you can extend or override this as needed.

Layout Manager (beta)

Full Page LayoutThis example shows how to build a full page layout.
Layout inside a resizable PanelThis example shows how to build a layout inside of a resizable Panel Control.
Using a Layout with Grids CSSThis example shows how to use the Layout Manager with the Grids CSS.
Nesting a layoutNesting a layout inside another layout.
Simple ApplicationA simple date entry application.
Complex ApplicationAn advanced application using several YUI Utilities and Controls.
Skinning a LayoutLayout skinning is done via CSS. The Layout Manager comes with a default skin, but you can extend or override this as needed.

Menu Family

Basic Menu From MarkupBasic Menu From Markup
Basic Menu From JavaScriptBasic Menu From JavaScript
Grouped Menu Items Using MarkupGrouped Menu Items Using Markup
Grouped Menu Items Using JavaScriptGrouped Menu Items Using JavaScript
Grouped Menu Items With Titles From MarkupGrouped Menu Items With Titles From Markup
Grouped Menu Items With Titles From JavaScriptGrouped Menu Items With Titles From JavaScript
Multi-tiered Menu From MarkupMulti-tiered Menu From Markup
Multi-tiered Menu From JavaScriptMulti-tiered Menu From JavaScript
Handling Menu Click EventsHandling Menu Click Events
Listening For Menu EventsListening For Menu Events
MenuItem Configuration PropertiesMenuItem Configuration Properties
Setting Menu Configuration Properties At RuntimeSetting Menu Configuration Properties At Runtime
Website Left Nav With Submenus Built From MarkupWebsite Left Nav With Submenus Built From Markup
Website Left Nav With Submenus From JavaScriptWebsite Left Nav With Submenus From JavaScript
Website Top Nav With Submenus Built From MarkupWebsite Top Nav With Submenus Built From Markup
Website Top Nav With Submenus From JavaScriptWebsite Top Nav With Submenus From JavaScript
Website Left Nav Using Animation With Submenus Built From MarkupWebsite Left Nav Using Animation With Submenus Built From Markup
Website Left Nav Using Animation With Submenus From JavaScriptWebsite Left Nav Using Animation With Submenus From JavaScript
Website Top Nav Using Animation With Submenus Built From MarkupWebsite Top Nav Using Animation With Submenus Built From Markup
Website Top Nav Using Animation With Submenus From JavaScriptWebsite Top Nav Using Animation With Submenus From JavaScript
Context MenuContext Menu
Adding A Context Menu To A TableAdding A Context Menu To A Table
Adding A Context Menu To A TreeViewAdding A Context Menu To A TreeView
OS-Style Programs MenuOS-Style Programs Menu
Application MenubarApplication Menubar
Implementing ARIA Roles and States with MenuThis example demonstrates how use the WAI-ARIA Roles and States as implemented for Firefox 3 with the YUI Menu Control.

Rich Text Editor (beta)

Flickr Image SearchThis example adds a button that opens a custom panel containing an AutoComplete Control that can be used to retrieve photos from Flickr.
Calendar PluginThis 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 InsertionThis example adds a button that opens a custom panel to insert custom icons.
Plain Text SwitcherThis 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 ManagerThis example posts data to the server with Connection Manager and returns filtered data.
Skinning the EditorEditor skinning is done via CSS. The Editor comes with a default skin, but you can extend or override this as needed.
Default Toolbar ConfigHere you will find the default config for the Editor's toolbar.
Code EditorThis example demonstrates how to build a Source Editor.
Editor inside a Tabview ControlPlacing an Editor inside of a Tabview Control.
One Editor, Multiple Edit AreasHave one Editor control several editable areas on a single page.
Editor with Custom Image BrowserUse a custom image browser for image insertion into the editor.
Simple Editor — Basic ButtonsUsing the SimpleEditor Control with Basic Buttons.
Simple Editor — Advanced ButtonsUsing the SimpleEditor Control with Advanced Buttons.
Editor — Basic ButtonsUsing the Editor Control with Basic Buttons.
Editor Auto Adjusting HeightUsing the autoHeight config to make the Editor change it's height based on the content.

Slider Control

Basic Vertical SliderThis 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 MarksThis example implements a slider with tick marks.
RBG Slider ControlThis 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.
Bottom to top Vertical SliderThis example demonstrates how to create a vertical slider with values increasing as the slider moves up.
Horizontal Slider with two thumbsThis example demonstrates how to create a Slider with two thumbs.
Dual-thumb Slider with range highlightThis example demonstrates how to create a dual thumb slider with the enclosed range highlighted.

TabView Control

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

TreeView Control

Default TreeViewThis example creates a simple tree with default settings and randomly populates its nodes.
Dynamically Loading Node DataYou 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 DesignBy 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 DesignBy 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 IconsApplying a specific label style to each node allows you to customize the icons that each node displays.
Custom TreeView with Check BoxesIn this example, the TreeView icons are represented by checkboxes allowing for a task-list-style display.
TreeView with TooltipsIn this example, the a single Tooltip is configured to work with all of the nodes in the tree.

Uploader Control (experimental)

Simple Uploader ExampleA demonstration of the core features of the Uploader Control, including its use in conjunction with the YUI Logger Control.
Advanced Uploader ExampleThis advanced Uploader example implementest upload-progress feedback using the DataTable Control.

Developer Tools

Logger Control

Basic LoggingDemonstrates basic logging functionality.
Configuring LogReaderLogReader configurations
Using LogWriterUse LogWriter to write logs from a custom source.
Logger Integration with YUI ComponentsPoint to the debug build of a YUI component to read built-in log messages with Logger.
Skinning ModelExplanation of Logger's skinning model.

Profiler (beta)

Simple Profiling ExampleDemonstrates basic usage of the Profiler for profiling functions.
Object Profiling ExampleDemonstrates usage of the Profiler for profiling objects.

ProfilerViewer Control (beta)

Simple ProfilingA simple use case profiling a Calendar Control instance with the ProfilerViewer Control.
Using the ProfilerViewer API while Profiling the YUI Menu ControlIn this example, profiling a simple set of menus and submenus, ProfilerViewer's API is leveraged to place the console in a floating, draggable palette.
Using Profiler and ProfilerViewer to Profile non-YUI CodeThis example explores the best strategy for using YUI to profile projects that are not YUI-based; it shows you how to load only the minimal YUI footprint during profiling, deferring the loading of ProfilerViewer (and its YUI dependencies) until you're ready to view the profiling data.
Skinning the ProfilerViewer ControlProfilerViewer's 'skin' is provided via a combination of CSS and other style information passed via JavaScript to the Flash-based Charts Control. This example helps you understand where to start if you want to customize the look and feel of a ProfilerViewer implementation.
ProfilerViewer Internationalization: SpanishThe ProfilerViewer Control can be easily internationalized by modifying the STRINGS member of YAHOO.widget.ProfilerViewer In this example, a Spanish translation provided by Caridy Patiño Mayea is applied to the UI.
ProfilerViewer Internationalization: GermanThe ProfilerViewer Control can be easily internationalized by modifying the STRINGS member of YAHOO.widget.ProfilerViewer In this example, a German translation provided by Christian Heilmann is applied to the UI.

YUI Test Utility

Simple Testing ExampleDemonstrates basic usage of YUI Test for setting up and running tests.
Advanced Test OptionsDemonstrates 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 ProcessingDemonstrates how to use the ArrayAssert object to test array data.
Asynchronous TestingDemonstrates basic asynchronous tests.
Asynchronous Event TestingDemonstrates using events with asynchronous tests.

YUI Web Sites We Love

The dozens of examples on this page are a worthwhile place to start, but the official YUI examples are just the tip of the iceberg when it comes to YUI sample code and YUI-powered sites from which you can gather additional ideas. Here are a few YUI-related sites that we find ourselves going back to again and again.

  • Dav Glass's Blog: Dav, who is now a member of the YUI team, has the most extensive set of YUI-focused examples anywhere on the web.
  • Planet Yazaar: YUI community member Ted Husted started the Yazaar site to collect great code samples from around the YUI world.

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings