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))
• Calendar inside a Container (included with examples for the Calendar Control)
• Menu Buttons (included with examples for the Button Control)
• Split Buttons (included with examples for the Button Control)
• Calendar Menu Button (included with examples for the Button Control)
• Calendar Split Button (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)