YUI Library: Panel 2008-2-19 v2.

5
Simple Use Case: YAHOO.widget.Panel Key Interesting Moments in Panel YAHOO.widget.Panel:
See online docs for a complete list of Panel’s Custom Events. Properties
Markup (optional, using standard module format): Event Arguments
<div id="myPanel"> body (el)
<div class="hd">Header content.</div> beforeRenderEvent None. element (el) containing
<div class="bd">Body content.</div> renderEvent None. header, body & footer

beforeShowEvent None. footer (el)

<div class="ft">Footer content.</div> header (el)
</div> showEvent None.
beforeHideEvent None. id (s) of the element
Script:
hideEvent None.
var oPanel = new YAHOO.widget.Panel("myPanel"); YAHOO.widget.Panel:
beforeMoveEvent X, Y to which the Panel will be moved.
oPanel.render();
moveEvent X, Y to which the Panel was moved.
Methods
oPanel.show();
hideMaskEvent None. appendToBody(el
Creates, renders and shows a panel using existing markup and all showMaskEvent None. element)
default Panel settings. changeContentEvent None. appendToFooter(el
changeBodyEvent String or element representing new body element)
Constructor: YAHOO.widget.Panel content (Note: there are corresponding Header and appendToHeader(el
Footer change events, too). element)
YAHOO.widget.Panel(str elId[, obj config]); All Panel events are YUI Custom Events (see Event Utility docs); subscribe to these events hide()
using their subscribe method: myPanel.hideEvent.subscribe(fnMyHandler);. render([el element])
Arguments:
Argument required for
(1) Element ID: HTML ID of the element being used to create the
Panel. If this element doesn't exist, it will be created. Key Panel Configuration Options Panels not built from existing
markup. Panel will not be in
See online docs for complete list of Panel options; see Solutions (bottom left) for how to set your options. the DOM or visible until
(2) Configuration Object: JS object defining configuration properties render is called
for the panel. See Configuration section for full list. Option (type) Default Description
close (b) null Display close icon. setBody(str or el
content)
draggable (b) null Make the Panel draggable.
Solutions modal (b) null Use a modal mask behind Panel when
setFooter(str or el
content)
There are three ways to configure options on your Panel: Panel is visible.
setHeader(str or el
visible (b) true Sets the “display” style property to content)
// 1. In the constructor, via an object literal:
“block” (true) or “none” (false). show()
var myPanel = new YAHOO.widget.Panel("myPanel", {
visible:false }); x, y, and xy null These properties can be used to set the bringToTop()
// 2. Via "queueProperty", prior to rendering: (int, int, ar) Panel’s “top” and/or “left” styles.
myPanel.cfg.queueProperty("visible",false); context (ar) null Anchors Panel to a context element;
// 3. Via "setProperty" after rendering: format: [el contextEl, s Dependencies
myPanel.cfg.setProperty("visible",false); panelCorner, s contextCorner]
with corners defined as “tr” for “top Panel requires the full
Align the top left corner of your Panel with the bottom right corner right” and so on. Container package,
of an element whose HTML ID is "contextEl": fixedcenter (b) false Automatically center Panel in viewport? the YAHOO object,
myPanel.cfg.setProperty(“context”, [“contextEl”, width (s) null Sets “width” style property. Event, and Dom.
“tl”, “br”]); height (s) null Sets “height” style property. Animation, and Drag
zindex (int) null Sets “z-index” style property. and Drop are
Subscribe to a Panel Custom Event, listening for changes to the optional. Note:
Panel’s postion, alerting its new position after move: constrainto false When true, prevents the Panel from
Panels use Drag and
viewport (b) being dragged out of the viewport.
alertMove = function(type, args) { Drop by default — a
underlay (s) “shadow” Type of underlay: “shadow”, “none”, or
alert(args[0] + “, “ + args[1]); simple Panel with
“matte”.
} default configuration
myPanel.subscribe(“move”, alertMove); effect (obj) null Object defining effect (FADE or SLIDE) options will not be
to use in showing and hiding Panel: draggable without it.
{effect: YAHOO.widget.
ContainerEffect.FADE, duration:1}