YUI Container: Tutorials

YUI Container Interactive Tutorials

The YUI Calendar Tutorials will provide you with working examples of several common uses of the Calendar component. Each tutorial contains a working functional example, plus documentation describing how it works.

Module: Quickstart

Quickly get up and running with the most basic Modules.

Overlay: Quickstart

Create an position a simple Overlay.

Tooltip: Quickstart

Create several Tooltips associated with different types of elements.

Tooltip: One Tooltip, Many Elements

Get a significant performance boost by reusing one Tooltip for a large number of context elements.

Panel: Quickstart

Create and display a simple draggable content Panel.

Panel: Skinning

Learn how to use Panel's CSS hooks to customize its look and feel.

Panel: Advanced Skinning using CSS

Modify the classic Panel using only CSS to give it a more OS-like look and feel.

Panel: Creating a 'Loading' Popup

Use Panel to temporarily display a message while a large block of content is loading asynchronously.

PhotoBox: Subclassing Panel

Build a subclass of Panel that acts as a simple photo slideshow with basic navigational features.

ResizePanel: Creating a Resizable Panel

Build a subclass of Panel that adds a special resize handle to the footer for dynamically resizing the Panel using drag and drop.

Dialog Quickstart

Create a basic Dialog and submit its form contents asynchronously.

SimpleDialog Quickstart

Dynamically build a simple OK/Cancel dialog and react to the user's response.

Using ContainerEffect

Learn to use the 'effect' property in conjunction with the ContainerEffect class to animate your containers when they are shown and hidden.

Using OverlayManager

Use the OverlayManager to register a set of containers for focus tracking.

Using KeyListener

Configure the 'keylistener' property to allow containers to dynamically react to key press events.