# Yahoo! UI Library

### layout 2.5.0

Yahoo! UI Library > layout > YAHOO.widget.LayoutUnit

Show Private Show Protected

## Class YAHOO.widget.LayoutUnit - extends YAHOO.util.Element

Provides a fixed position unit containing a header, body and footer for use with a YAHOO.widget.Layout instance.

### Constructor

YAHOO.widget.LayoutUnit `( el , attrs )`

Parameters:
  `el <String/HTMLElement>` The element to make a unit.
  `attrs <Object>` Object liternal containing configuration parameters.

### Properties

#### _anim `- private YAHOO.util.Anim`

A reference to the Animation instance used by this LayouUnit

#### _clip `- private HTMLElement`

A reference to the clip element used when collapsing the unit

#### _collapsed `- private Boolean`

Flag to determine if the unit is collapsed or not.

#### _collapsing `- private Boolean`

A flag set while the unit is being collapsed, used so we don't fire events while animating the size

#### _gutter `- private Object`

A simple hash table used to store the gutter to apply to the Unit

#### _instances `- private static Object`

Internal hash table for all layout unit instances

#### _lastHeight `- private Number`

A holder for the last known height of the unit

#### _lastLeft `- private Number`

A holder for the last known left of the unit

#### _lastScroll `- private Boolean`

A holder for the last known scroll state of the unit

#### _lastTop `- private Number`

A holder for the last known top of the unit

#### _lastWidth `- private Number`

A holder for the last known width of the unit

#### _resize `- private YAHOO.util.Resize`

A reference to the Resize instance used by this LayoutUnit

#### _sizes `- private Object`

A collection of the current sizes of the contents of this Layout Unit

#### body `- HTMLElement`

A reference to the HTML element used for the body

#### browser `- Object`

A modified version of the YAHOO.env.ua object

#### footer `- HTMLElement`

A reference to the HTML element used for the footer

#### header `- HTMLELement`

A reference to the HTML element used for the Header

#### STR_CLOSE `- {String}`

String used for close button title

#### STR_COLLAPSE `- {String}`

String used for collapse button title

#### STR_EXPAND `- {String}`

String used for expand button title

#### Properties inherited from YAHOO.util.Element:

`DOM_EVENTS`

#### Properties inherited from YAHOO.util.AttributeProvider:

`_configs`

#### Properties inherited from YAHOO.util.EventProvider:

`__yui_events, __yui_subscribers`

### Methods

#### _cleanGrids

`private void _cleanGrids ( )`
This method attempts to clean up the first level of the YUI CSS Grids, YAHOO.util.Selector is required for this operation.

Returns: `void`

#### _createClip

`private void _createClip ( )`
Create the clip element used when the Unit is collapsed

Returns: `void`

#### _createHeader

`private HTMLElement _createHeader ( )`
Creates the HTMLElement for the header

Returns: `HTMLElement`
  The new HTMLElement

#### _fixQuirks

`private Number _fixQuirks ( el , dim , side )`
Fixes the box calculations for IE in QuirksMode

Parameters:
  `el <HTMLElement>` The HTMLElement to set the dimension on
  `dim <Number>` The number of the dimension to fix
  `side <String>` The dimension (h or w) to fix. Defaults to h

Returns: `Number`
  The fixed dimension

#### _getBorderSizes

`private Array _getBorderSizes ( el )`
Get the CSS border size of the element passed.

Parameters:
  `el <HTMLElement>` The element to get the border size of

Returns: `Array`
  An array of the top, right, bottom, left borders.

#### _getBoxSize

`private Array _getBoxSize ( el )`
Get's the elements clientHeight and clientWidth plus the size of the borders

Parameters:
  `el <HTMLElement>` The HTMLElement to get the size of

Returns: `Array`
  An array of height and width

#### _setHeight

`private Number _setHeight ( el , h )`
Sets the height of the element based on the border size of the element.

Parameters:
  `el <HTMLElement>` The HTMLElement to have it's height set
  `h <Number>` The height that you want it the element set to

Returns: `Number`
  The new height, fixed for borders and IE QuirksMode

#### _setWidth

`private Number _setWidth ( el , w )`
Sets the width of the element based on the border size of the element.

Parameters:
  `el <HTMLElement>` The HTMLElement to have it's width set
  `w <Number>` The width that you want it the element set to

Returns: `Number`
  The new width, fixed for borders and IE QuirksMode

#### _toggleClip

`private void _toggleClip ( )`
Toggle th current state of the Clip element and set it's height, width and position

Returns: `void`

#### close

`YAHOO.widget.Layout close ( )`
Close the unit, removing it from the parent Layout.

Returns: `YAHOO.widget.Layout`
  The parent Layout instance

#### collapse

`YAHOO.widget.LayoutUnit collapse ( )`
Collapse the Unit if it is not collapsed.

Returns: `YAHOO.widget.LayoutUnit`
  The LayoutUnit instance

#### destroy

`YAHOO.widget.Layout destroy ( )`
Removes this unit from the parent and cleans up after itself.

Returns: `YAHOO.widget.Layout`
  The parent Layout instance

#### expand

`YAHOO.widget.LayoutUnit expand ( )`
Expand the Unit if it is collapsed.

Returns: `YAHOO.widget.LayoutUnit`
  The LayoutUnit instance

#### getLayoutUnitById

`static Object getLayoutUnitById ( )`
Get's a layout unit object by the HTML id of the element associated with the Layout Unit object.

Returns: `Object`
  The Layout Object

#### getSizes

`Object getSizes ( )`
Get a reference to the internal sizes object

Returns: `Object`
  An object of the sizes used for calculations

#### init

`private void init ( )`
The initalization method inherited from Element.

Returns: `void`

#### initAttributes

`private void initAttributes ( )`
Processes the config

Returns: `void`

#### resize

`YAHOO.widget.LayoutUnit resize ( force )`
Resize either the unit or it's clipped state, also updating the box inside

Parameters:
  `force <Boolean>` This will force full calculations even when the unit is collapsed

Returns: `YAHOO.widget.LayoutUnit`
  The LayoutUnit instance

#### toggle

`YAHOO.widget.LayoutUnit toggle ( )`
Toggles the Unit, replacing it with a clipped version.

Returns: `YAHOO.widget.LayoutUnit`
  The LayoutUnit instance

#### toString

`String toString ( )`
Returns a string representing the LayoutUnit.

Returns: `String`

#### Methods inherited from YAHOO.util.Element:

`_registerHTMLAttr, addClass, addListener, appendChild, appendTo, fireQueue, getElementsByClassName, getElementsByTagName, getStyle, hasChildNodes, hasClass, initAttributes, insertBefore, on, removeChild, removeClass, removeListener, replaceChild, replaceClass, setStyle, subscribe`

#### Methods inherited from YAHOO.util.AttributeProvider:

`configureAttribute, fireBeforeChangeEvent, fireChangeEvent, get, getAttributeConfig, getAttributeKeys, refresh, register, resetAttributeConfig, resetValue, set, setAttributeConfig, setAttributes`

#### Methods inherited from YAHOO.util.EventProvider:

`createEvent, fireEvent, hasEvent, subscribe, unsubscribe, unsubscribeAll`

### Events

#### animateChange

`animateChange ( eventInfo )`
Fires when the value for the configuration attribute 'animate' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeAnimateChange

`beforeAnimateChange ( eventInfo )`
Fires before the value for the configuration attribute 'animate' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeBodyChange

`beforeBodyChange ( eventInfo )`
Fires before the value for the configuration attribute 'body' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeCloseChange

`beforeCloseChange ( eventInfo )`
Fires before the value for the configuration attribute 'close' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeCollapseChange

`beforeCollapseChange ( eventInfo )`
Fires before the value for the configuration attribute 'collapse' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeCollapsesizeChange

`beforeCollapsesizeChange ( eventInfo )`
Fires before the value for the configuration attribute 'collapseSize' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeDurationChange

`beforeDurationChange ( eventInfo )`
Fires before the value for the configuration attribute 'duration' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeEasingChange

`beforeEasingChange ( eventInfo )`
Fires before the value for the configuration attribute 'easing' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeFooterChange

`beforeFooterChange ( eventInfo )`
Fires before the value for the configuration attribute 'footer' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeGridsChange

`beforeGridsChange ( eventInfo )`
Fires before the value for the configuration attribute 'grids' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeGutterChange

`beforeGutterChange ( eventInfo )`
Fires before the value for the configuration attribute 'gutter' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeHeaderChange

`beforeHeaderChange ( eventInfo )`
Fires before the value for the configuration attribute 'header' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeHeightChange

`beforeHeightChange ( eventInfo )`
Fires before the value for the configuration attribute 'height' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeHoverChange

`beforeHoverChange ( eventInfo )`
Fires before the value for the configuration attribute 'hover' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeLeftChange

`beforeLeftChange ( eventInfo )`
Fires before the value for the configuration attribute 'left' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeMaxheightChange

`beforeMaxheightChange ( eventInfo )`
Fires before the value for the configuration attribute 'maxHeight' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeMaxwidthChange

`beforeMaxwidthChange ( eventInfo )`
Fires before the value for the configuration attribute 'maxWidth' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeMinheightChange

`beforeMinheightChange ( eventInfo )`
Fires before the value for the configuration attribute 'minHeight' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeMinwidthChange

`beforeMinwidthChange ( eventInfo )`
Fires before the value for the configuration attribute 'minWidth' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeParentChange

`beforeParentChange ( eventInfo )`
Fires before the value for the configuration attribute 'parent' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforePositionChange

`beforePositionChange ( eventInfo )`
Fires before the value for the configuration attribute 'position' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeProxyChange

`beforeProxyChange ( eventInfo )`
Fires before the value for the configuration attribute 'proxy' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeResize

`beforeResize ( )`
Firef at the beginning of the resize method. If you return false, the resize is cancelled.

#### beforeResizeChange

`beforeResizeChange ( eventInfo )`
Fires before the value for the configuration attribute 'resize' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeScrollChange

`beforeScrollChange ( eventInfo )`
Fires before the value for the configuration attribute 'scroll' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeTopChange

`beforeTopChange ( eventInfo )`
Fires before the value for the configuration attribute 'top' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeWidthChange

`beforeWidthChange ( eventInfo )`
Fires before the value for the configuration attribute 'width' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### beforeWrapChange

`beforeWrapChange ( eventInfo )`
Fires before the value for the configuration attribute 'wrap' changes. Return false to cancel the attribute change.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the current attribute value and the new value.

#### bodyChange

`bodyChange ( eventInfo )`
Fires when the value for the configuration attribute 'body' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### close

`close ( )`
Fired when the unit is closed

#### closeChange

`closeChange ( eventInfo )`
Fires when the value for the configuration attribute 'close' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### collapse

`collapse ( )`
Fired when the unit is collapsed

#### collapseChange

`collapseChange ( eventInfo )`
Fires when the value for the configuration attribute 'collapse' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### collapseSizeChange

`collapseSizeChange ( eventInfo )`
Fires when the value for the configuration attribute 'collapseSize' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### contentChange

`contentChange ( )`
Fired when the content in the header, body or footer is changed via the API

#### durationChange

`durationChange ( eventInfo )`
Fires when the value for the configuration attribute 'duration' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### easingChange

`easingChange ( eventInfo )`
Fires when the value for the configuration attribute 'easing' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### expand

`expand ( )`
Fired when the unit is exanded

#### footerChange

`footerChange ( eventInfo )`
Fires when the value for the configuration attribute 'footer' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### gridsChange

`gridsChange ( eventInfo )`
Fires when the value for the configuration attribute 'grids' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### gutterChange

`gutterChange ( eventInfo )`
Fires when the value for the configuration attribute 'gutter' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### headerChange

`headerChange ( eventInfo )`
Fires when the value for the configuration attribute 'header' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### heightChange

`heightChange ( eventInfo )`
Fires when the value for the configuration attribute 'height' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### hoverChange

`hoverChange ( eventInfo )`
Fires when the value for the configuration attribute 'hover' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### leftChange

`leftChange ( eventInfo )`
Fires when the value for the configuration attribute 'left' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### maxHeightChange

`maxHeightChange ( eventInfo )`
Fires when the value for the configuration attribute 'maxHeight' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### maxWidthChange

`maxWidthChange ( eventInfo )`
Fires when the value for the configuration attribute 'maxWidth' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### minHeightChange

`minHeightChange ( eventInfo )`
Fires when the value for the configuration attribute 'minHeight' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### minWidthChange

`minWidthChange ( eventInfo )`
Fires when the value for the configuration attribute 'minWidth' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### parentChange

`parentChange ( eventInfo )`
Fires when the value for the configuration attribute 'parent' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### positionChange

`positionChange ( eventInfo )`
Fires when the value for the configuration attribute 'position' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### proxyChange

`proxyChange ( eventInfo )`
Fires when the value for the configuration attribute 'proxy' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### resize

`resize ( )`
Fired when this.resize is called

#### resizeChange

`resizeChange ( eventInfo )`
Fires when the value for the configuration attribute 'resize' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### scrollChange

`scrollChange ( eventInfo )`
Fires when the value for the configuration attribute 'scroll' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### startResize

`startResize ( )`
Fired when the Resize Utility fires it's startResize Event.

#### topChange

`topChange ( eventInfo )`
Fires when the value for the configuration attribute 'top' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### widthChange

`widthChange ( eventInfo )`
Fires when the value for the configuration attribute 'width' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### wrapChange

`wrapChange ( eventInfo )`
Fires when the value for the configuration attribute 'wrap' changes.

Parameters:
  `eventInfo <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### Events inherited from YAHOO.util.Element:

`appendTo, available, beforeAppendTo, beforeElementChange, contentReady, elementChange,`

### Configuration Attributes

#### animate `- Boolean`

Use animation to collapse/expand the unit

#### body `- object`

The content for the body. If we find an element in the page with an id that matches the passed option we will move that element into the body of this unit.

#### close `- object`

Adds a close icon to the unit

#### collapse `- object`

Adds a collapse icon to the unit

#### collapseSize `- Number`

The pixel size of the Clip that we will collapse to

#### duration `- object`

The duration to give the Animation Utility when animating the opening and closing of Units

#### easing `- object`

The Animation Easing to apply to the Animation instance for this unit.

#### footer `- object`

The content for the footer. If we find an element in the page with an id that matches the passed option we will move that element into the footer of this unit.

#### grids `- Boolean`

Set this option to true if you want the LayoutUnit to fix the first layer of YUI CSS Grids (margins)

#### gutter `- String`

The gutter that we should apply to the parent Layout around this Unit. Supports standard CSS markup: (2 4 0 5) or (2) or (2 5)

#### header `- object`

The text to use as the Header of the Unit

#### height `- Number`

The height of the Unit

#### hover `- object`

Config option to pass to the Resize Utility

#### left `- private Number`

The current left position of the Unit

#### maxHeight `- Number`

The maxHeight parameter passed to the Resize Utility

#### maxWidth `- Number`

The maxWidth parameter passed to the Resize Utility

#### minHeight `- Number`

The minHeight parameter passed to the Resize Utility

#### minWidth `- Number`

The minWidth parameter passed to the Resize Utility

#### parent `- {Object} YAHOO.widget.Layout`

The parent Layout that we are assigned to

#### position `- {String}`

The position (top, right, bottom, left or center) of the Unit in the Layout

#### proxy `- Boolean`

Use the proxy config setting for the Resize Utility

#### resize `- object`

Should a Resize instance be added to this unit

#### scroll `- object`

Adds a class to the unit to allow for overflow: auto, default is overflow: hidden

#### top `- private Number`

The current top positioning of the Unit

#### width `- Number`

The width of the Unit

#### wrap `- private HTMLElement`

A reference to the wrap element

#### Configuration attributes inherited from YAHOO.util.Element:

`element,`

Copyright © 2007 Yahoo! Inc. All rights reserved.