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