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)