Sunday, October 1st, 2006

YUI Panel Tutorial

Category: Library, Tutorial, UI, Yahoo!

This tutorial is an excellent overview of the YUI panel control. Each of the seven section includes a description, a live example, and a code snippet.

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 and panel.hide() respectively.
  • The properties object defines what the panel should do and following are some basic examples.

Posted by Michael Mahemoff at 6:31 am

3.7 rating from 111 votes


Comments feed TrackBack URI

This tutorial is nice.
But one thing which can be great would be to have an exemple of a panel like two animation :
One is fading (there is an exemple in this tutorial)
The second is moving from right to left on the right of the window, letting the right side of the panel touching the right side of the window (I hope to be clear) / or moving from bottom to top on the bottom of the window, letting the bottom side of the panel touching the bottom side of the window).
It will act as an information panel that appear in the bottom right of the window.

Does anyone have an idea of how to achieve that ?


Comment by julien — October 3, 2006

Well since you can use CSS on the panel and the panel would be a child of the #doc div in a Yahoo template. Why not position is absolute setting the bottom:0 and the right:0. I would think that would be sufficient. If now then using the yahoo dom api you could keep polling the windows innerHeight and innerWidth and moving the panel to the returned values – the panels own width and height.

Comment by scott — October 3, 2006

debt consolidation

debt consolidation qwxtkcdka

Trackback by debt consolidation — November 18, 2006

Hardcore. Hardcore Porn. Hardcore%2

hardcore hardcore hardcore hardcore hardcore hardcore hardcore hardcore hardcore diqsivyqns

Trackback by hardcore — November 30, 2006

Thank you, just what i was looking for!

Comment by Del — June 22, 2007

Leave a comment

You must be logged in to post a comment.