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