Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Container Family

# Container Family: Examples

The Container Family of UI controls includes all 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.

- 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.

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

- Example of Color Picker Built in a Dialog via JavaScript (included with examples for the Color Picker Control (beta))
- Menu Buttons (included with examples for the Button Control (beta))
- Split Buttons (included with examples for the Button Control (beta))
- OS-Style Programs Menu (included with examples for the Menu Family)
- Application Menubar (included with examples for the Menu Family)

### Container Family:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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