Seven examples of YUI panels

Following are some implementation examples (of increasing complexity) of the YUI panel widget.

Panel allows you to show a small panel on the screen to provide extra information. If you want the information to be available without JavaScript, you'll have to use the following HTML for a panel:

<div id="the_panel_id"> 
  <div class="hd">Header One</div>  
  <div class="bd">Body One</div>  
  <div class="ft">Footer One</div>  
</div>

The header (hd), body (bd) and footer (ft) are optional.

The YUI panel widget solves a lot of issues hand-rolled solutions doing the same thing have:

You create a new panel instance with the following constructor:

var panel = new YAHOO.widget.Panel("panel_id",{properties object}); 

Example 1: A simple panel

Activate Panel One to see the panel, click the close button on its top right to get rid of it.

Header One
Body One
Footer One
var panel_one = new YAHOO.widget.Panel("panel_one", 
	{ 
	    close:true,  
	    visible:false,  
	    draggable:false
	} 
); 
panel_one.render();

Example 2: A draggable panel

The draggable property defines whether the panel could be moved via drag and drop or not. Activate Panel Two to see the panel, move it around by dragging the header and click the close button on its top right to get rid of it.

Header Two
Body Two
Footer Two
var panel_two = new YAHOO.widget.Panel("panel_two", 
	{ 
	    close:true,  
	    visible:false,  
	    draggable:true
	} 
); 
panel_two.render();

Example 3: Keeping the panel in the browser

Setting the constraintoviewport property to true makes sure that the panel can never leave the browser window. Activate Panel Three to see the panel, move it around by dragging the header, try to move it outside the browser window and click the close button on its top right to get rid of it.

Header Three
Body Three
Footer Three
var panel_three = new YAHOO.widget.Panel("panel_three", 
	{ 
	    close:true,  
	    visible:false,  
	    draggable:true,
	    constraintoviewport:true
	} 
); 
panel_three.render();

Example 4: Using contextual positioning

One really handy feature of panel is the context property. It defines what element should provide the context for the panel. The syntax is a bit confusing at first. The value of the property is an array starting with the element's ID (or a variable containing the element object), followed by which corner of the panel (tl, tr, br or bl) should connect with which corner of the context element.

Activate Panel Four to see the panel, positioned to the top right of the context element with its bottom left corner connecting with it. Try the other links below to move the panel to the other corners of the context element and click the close button on its top right to get rid of it.

Header Four
Body Four
Footer Four
Your Context Element with the ID anchorElement
var panel_four = new YAHOO.widget.Panel("panel_four", 
	{ 
		close:true,  
		visible:false,  
		draggable:true,
		context:['anchorElement','bl','tr']
	} 
); 
panel_four.render();

Example 5: A modal panel

Setting the modal property to true makes sure that the panel resides on a screening mask that covers the whole browser window. This stops users from interacting with the page until they closed the panel. Activate Panel Five to see the panel, move it around by dragging the header and click the close button on its top right to get rid of it and make the rest of the document available again.

Header Five
Body Five
Footer Five
var panel_five = new YAHOO.widget.Panel("panel_five", 
	{ 
		close:true,  
		visible:false,  
		draggable:true,
		modal:true
	} 
); 
panel_five.render();

Example 6: Animating the panel

The effect property allows you to add an effect to the appearance and disappearance of the panel. There are two presets: FADE and SLIDE. You define which one to user and its duration in seconds. Activate Panel Six to see it fading in smoothly and fade out when you click the close button on its top right.

Header Six
Body Six
Footer Six
var panel_six = new YAHOO.widget.Panel("panel_six", 
	{ 
		close:true,  
		visible:false,  
		draggable:true,
		effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration: 1}
	} 
); 
panel_six.render();

Example 7: Dynamically creating a panel

In addition to turning existing markup into a panel, you can also generate panels on the fly. You need to use the setHeader(), setBody() and setFooter() methods to populate the panel and provide the render() method with an element to apply the newly created panel to.

Activate Panel Seven to add it to the document and click the close button on its top right to make it vanish.

var panel_seven = new YAHOO.widget.Panel("panel_seven", 
	{ 
	    close:true,  
	    visible:false,  
	    draggable:true
	} 
); 
panel_seven.setHeader('Dynamic!');
panel_seven.setBody('Body');
panel_seven.setFooter('Footer');
panel_seven.render(document.body);

More information

You can find a lot more information and the full documentation of what is available at the YUI panel information page.

Comment on the blog | Digg this | Add to deli.cio.us | Technorati