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 can allow the user to drag and drop the panel around to avoid it covering important information
• You can make sure the panel cannot be dragged off-screen and cause scrollbars
• You can define if you want a drop shadow on the panel or not
• You can force the panel to use the iframe hack to make sure that it will cover form elements and other iframes on MSIE
• You can position the panel in context with another element
• You can create a modal panel, which makes sure that the rest of the page is not clickable for as long as the panel is shown

You create a new panel instance with the following constructor:

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

• The panel_id is the ID of the HTML element, and a new element will be created if there is none available yet.
• You add the changed (or newly created) panel to the document by calling the panel.render() method and show and hide it with panel.show() and panel.hide() respectively.
• The properties object defines what the panel should do and following are some basic examples.

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.

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.

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.

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.

• Set to top left - panel_four.cfg.setProperty('context',['anchorElement', 'br', 'tl'])
• Set to bottom right - panel_four.cfg.setProperty('context',['anchorElement', 'tl', 'br'])
• Set to bottom left - panel_four.cfg.setProperty('context',['anchorElement', 'tr', 'bl'])

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.

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.

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