YUI Library Home

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

Container Family:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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