Getting Started

To use Panel, include the following code in your page:

<!-- Sam Skin CSS --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css"> <!-- Dependencies --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> <!-- OPTIONAL: Animation (only required if enabling Animation) --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script> <!-- OPTIONAL: Drag & Drop (only required if enabling Drag & Drop) --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js"></script> <!-- Source file --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>

Using Panel

This section describes common tasks for creating and using Panel. It contains these sections:

• Defining Panel Markup
• Initializing the Panel
• Rendering the Panel
• Configuration Properties

Panel inherits its constructor and configuration, as well as several other important methods, from Overlay. See Overlay for more information on how to utilize Panel's inherited features.

Defining Panel Markup

HTML markup for Panel uses the same modular format underlying Module. Placing a panel's markup in the page, rather than adding Panel content via script once the Panel instance is created, allows you to use Progressive Enhancement — showing the full content and functionality of your site to users who may have older browsers or who have JavaScript disabled while still providing a richer interaction to modern, standards-compatible browsers. In most cases, you won't place a Panel's content on the page prior to creating the panel; setting content dynamically is the most common use case. However, where it's possible and useful to do so, you may instantiate a Panel based on modular content that follows the following pattern (inherited from Module):

<div id="myPanel"> <div class="hd"></div> <div class="bd"></div> <div class="ft"></div> </div>

Initializing the Panel

Panel is easy to use and can generate extremely powerful interactions with simple configuration options and CSS styling. In its simplest case, a Panel's constructor looks like this:

myPanel = new YAHOO.widget.Panel("myPanel");

More often, you'll want to configure some of the properties of Panel by passing in a configuration object as the second argument to your constructor. Configuration options are detailed later in this document; here is an example that implements some very common configurations:

//The second argument passed to the
//constructor is a configuration object:
myPanel = new YAHOO.widget.Panel("win", {
	width:"400px", 
	fixedcenter: true, 
	constraintoviewport: true, 
	underlay:"shadow", 
	close:true, 
	visible:false, 
	draggable:true} );
//If we haven't built our panel using existing markup,
//we can set its content via script:
myPanel.setHeader("The Panel Control");
myPanel.setBody("The Panel is a powerful UI control
  that enables you to create floating windows without
  using browser popups.  Effects like drag and drop and
  constrain-to-viewport are easy to configure.");
//Although we configured many properties in the
//constructor, we can configure more properties or 
//change existing ones after our Panel has been
//instantiated:
myPanel.cfg.setProperty("underlay","matte");

For more information about Panel's many configuration options, see Configuration Properties below. For more ideas about how to use Panel and how to customize its look and feel, see the Examples.

Rendering the Panel

Once initialized, a Panel is rendered in the same way as Module, by invoking the render() method. As with Module, if the Panel was not created from markup you need to pass to the render method, the parent element to which the Panel should be added.

Configuration Properties

Panel has the following configuration properties:

Panel has the following inherited configuration properties:

Support & Community

The YUI Library and related topics are discussed on the on the ydn-javascript mailing list.

In addition, please visit the YUIBlog for updates and articles about the YUI Library written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are located on the YUI SourceForge project site. Before filing new feature requests or bug reports, please review our reporting guidelines.

• Guidelines for YUI feature requests and bug reports.
• Review current bug list or file a new bug.
• Review current feature requests or file a new feature request.