YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Container Family

# Container Family: Examples

The Container Family of UI controls supports a varient of interaction patterns in which content that floats above the main layer of the page: Tooltip, Panel, Dialog and SimpleDialog are the most commonly used Container Controls. Module and Overlay are base classes useful in custom widget development. Think of Container as providing a basic windowing foundation in Overaly and a set of fully-realized windowing widgets in Tooltip, Panel, Dialog, and SimpleDialog.

- 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 Modal "Loading" Panel: This example shows how to use a Panel Control instance to display a modal "loading" or "please wait" message.
- Creating a Resizable Panel: In this example, we look at how Panel can be combined with the Resize utility 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.
- Using the Container ARIA Plugin: The Container ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with the Container family of controls.

## Other YUI Examples That Make Use of the Container Family

- Using the Button ARIA Plugin (included with examples for the Button Control)
- Using A Menu Button To Replace A <select> Element (included with examples for the Button Control)
- Replacing the content of a Button's Menu (included with examples for the Button Control)
- Example of Color Picker Built in a Dialog via JavaScript (included with examples for the Color Picker Control)
- Layout inside a resizable Panel (included with examples for the Layout Manager)
- Editor in a Dialog Control (included with examples for the Rich Text Editor)
- Menu Buttons (included with examples for the Button Control)
- Popup Calendar - Advanced (included with examples for the Calendar Control)
- Showing, Hiding, and Reordering Columns. (included with examples for the DataTable Control)
- Split Buttons (included with examples for the Button Control)
- Simple Calendar Menu Button (included with examples for the Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for the Button Control)
- Color Picker Button (included with examples for the Button Control)
- Fixed Width Menu Button (included with examples for the Button Control)
- OS-Style Programs Menu (included with examples for the Menu Family)
- Application Menubar (included with examples for the Menu Family)
- Slider Button (included with examples for the Button Control)
- Complex Application (included with examples for the Layout Manager)

### Container Family:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF(external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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