SUI.Accordion

SUI.Accordion is a component that helps you to save space by stacking a number of panels/boxes and let the user swap them. It's sort of a vertical tab list. The SUI.Accordion object can host a number of SUI boxes, each of them has a title bar for the user to identify and select them.

Extends SUI.Box
Defined in: Accordion.js

Constructor summary
Attr.	Name / Description
public	SUI.Accordion(arg, [arg) Construct a SUI.Accordion object. The titles of the headers and (optional) the client boxes are given as argument to this constructor. It is also possible to select the initial box.

Constant summary
Attr.	Name	Description
private	ICON_SIZE	Size (width/height) of the icon.
private	ITEM_BORDER_BOTTOM_WIDTH	Line thickness of the lines separating the different parts of the control.
private	ITEM_HEIGHT	Height of an header.
private	ITEM_PADDING_LR	Padding left and right of text and icon in the header.
private	ITEM_PADDING_TOP	Padding top of text and icon in the header.

Member summary
Attr.	Type	Name	Description
private	SUI.Border	_border	The box's border.
private	int	_bottom	The bottom position of the box.
private	HTMLElementNode	_el	The box's element node.
private	int	_height	The height of the box.
private	Object[]	_items	The list of accordion items.
private	int	_left	The left position of the box.
private	int	_listeners	The listeners array.
private	int	_maxHeight	The maximum height of the box.
private	int	_maxWidth	The maximum width of the box.
private	int	_minHeight	The minimum height of the box.
private	int	_minWidth	The minimum width of the box.
private	SUI.Padding	_padding	The box's padding.
private	SUI.Box	_parent	The box's parent element.
private	int	_right	The right position of the box.
private	Object	_selectedItem	Reference to the currently selected item.
private	int	_top	The top position of the box.
private	int	_width	The width of the box.

Method summary
Attr.	Type	Name / Description
private		_addOnClickHeader(item) Add the onclick event handler on the header.
private		_buildControl(arg) Make all required boxes for the control.
private	int	_contentHeight() Calculate the available height for the content box.
private		_doClick(item) On onclick set the selected item and redraw the control.
public		absPos() Get the absolute position (top/left) of this box on the page. Note: You can only use this function if the HTML content of the page is fully rendered.
public		add(child, i) Add a box to one of the client areas of the control.
public		addClass(cls) Add a CSS class name to the class list of the HTML element associated with the box.
public		addListener(type, listener) Add/register a listener function. This way it is possible to register more than one listener function on one target.
public	SUI.Border	border(b) Get or set the border definition of the box.
public	int	bottom(b) Get or set the bottom of the box.
public		callListener(type) Call a listener function. Execute the default and additional listener functions. Note: the framework should not execute the default listeners directly but always through this method to ensure the execution of additional listener functions.
public	int	clientHeight() Get the client height of the box. The client height is the height of the box minus the top and bottom border and padding width.
public	int	clientWidth() Get the client width of the box. The client width is the width of the box minus the left and right border and padding width.
public		display() Display the accordion control. Set the CSS size and position of all the headers and for the currently displayed content box.
public		draw() Draw the box on the screen. It executes a two phase process: a layout phase in which the size and positions of the box (and of it's contents, for more complex derivatives) is calculated and a display phase in which the CSS size and position of the box's (and possible it's child elements) is set.
public	HTMLElementNode	el() Get the HTML element node of the box.
public	int	height(h) Get or set the height of the box.
public		layOut() Lay out the accordion control. Calculate the size and position of all the headers and for the currently displayed content box.
public	int	left(l) Get or set the left of the box.
public	int	maxHeight(mh) Get or set the maximum height of the box.
public	int	maxWidth(mw) Get or set the maximum width of the box.
public	int	minHeight(mh) Get or set the minimum height of the box.
public	int	minWidth(mw) Get or set the minimum width of the box.
public	SUI.Padding	padding(p) Get or set the padding definition of the box.
public	SUI.Box	parent(p) Get or set the parent box of the box. When setting the parent the box's element node will be appended to the parent box's HTML element node.
public		removeBox() Remove a box from the DOM tree.
public		removeClass(cls) Remove a CSS class name from the class list of the HTML element associated with the box.
public	int	right(r) Get or set the right of the box.
public		setDim() Set the CSS dimensions of this box and it's borders and padding. This is typically used in display functions to display boxes at the size and position that was calculated during layout.
public		setPos() Set the CSS postion of this box. This is typically used in display functions to display boxes at position that was calculated during layout. Note: use setDim if you want to set the position and size of the box.
public		setRect(t, l, w, h) Set the top, left, width and height of a box in one go.
public	int	top(t) Get or set the top of the box.
public	int	width(w) Get or set the width of the box.

Constructor

public SUI.Accordion( object arg, object [arg)

Construct a SUI.Accordion object. The titles of the headers and (optional) the client boxes are given as argument to this constructor. It is also possible to select the initial box.

Parameters:
Name	Type	Argument	Default	Description
Object	arg.elemAttr	<optional>		Additional (element) attributes for the box's element given as an object containing name and value pairs.
Object	arg.anchor	<optional>	{left: true, top: true}	The anchors for the box.
SUI.Border	arg.border	<optional>	new SUI.Border()	the border (width) of the box. Note: don't edit the border's members, you'll edit the boxes prototype. Assign a new SUI.Border object instead.
int	arg.bottom	<optional>	0	The bottom position of the box.
int	arg.height	<optional>	0	The height of the box.
int	arg.id	<optional>	auto generated	The id of the HTML element of the box.
int	arg.left	<optional>	0	The left position of the box.
int	arg.maxHeight	<optional>	1000000	The maximum height of the box.
int	arg.minHeight	<optional>	0	The minimal height of the box.
int	arg.maxWidth	<optional>	100000	The maximal width of the box.
int	arg.minWidth	<optional>	0	The minimal width of the box.
SUI.Padding	arg.padding	<optional>	new SUI.Padding()	the padding of the box. Note: don't edit the padding's members, you'll edit the boxes prototype. Assign a new SUI.Padding object instead.
SUI.Box	arg.parent	<optional>		the parent box of the box.
int	arg.right	<optional>	0	The right position of the box.
String	arg.tag	<optional>	"DIV"	An alternative tag name for the box.
int	arg.top	<optional>	0	The top position of the box.
int	arg.width	<optional>	0	The width of the box.
Object[]	arg.items			An array of object containing data for the accordion items.
String	[arg.items[].title="Item			x"] Header title.
SUI.Box	arg.items[].box	<optional>		A client box.
int	arg.selected	<optional>		Index of the client box that is initially shown.

View source: Accordion.js, line 62

Constants

private int ICON_SIZE

Size (width/height) of the icon.

Value: 16

View source: Accordion.js, line 117

private int ITEM_BORDER_BOTTOM_WIDTH

Line thickness of the lines separating the different parts of the control.

Value: 1

View source: Accordion.js, line 85

private int ITEM_HEIGHT

Height of an header.

Value: 24

View source: Accordion.js, line 93

private int ITEM_PADDING_LR

Padding left and right of text and icon in the header.

Value: 5

View source: Accordion.js, line 109

private int ITEM_PADDING_TOP

Padding top of text and icon in the header.

Value: 4

View source: Accordion.js, line 101

Members

private SUI.Border _border

The box's border.

Inherited From: SUI.Box#_border

View source: Box.js, line 672

private int _bottom

The bottom position of the box.

Inherited From: SUI.Box#_bottom

View source: Box.js, line 679

private HTMLElementNode _el

The box's element node.

Inherited From: SUI.Box#_el

View source: Box.js, line 686

private int _height

The height of the box.

Inherited From: SUI.Box#_height

View source: Box.js, line 693

private Object[] _items

The list of accordion items.

View source: Accordion.js, line 206

private int _left

The left position of the box.

Inherited From: SUI.Box#_left

View source: Box.js, line 700

private int _listeners

The listeners array.

Inherited From: SUI.Box#_listeners

View source: Box.js, line 707

private int _maxHeight

The maximum height of the box.

Inherited From: SUI.Box#_maxHeight

View source: Box.js, line 714

private int _maxWidth

The maximum width of the box.

Inherited From: SUI.Box#_maxWidth

View source: Box.js, line 721

private int _minHeight

The minimum height of the box.

Inherited From: SUI.Box#_minHeight

View source: Box.js, line 728

private int _minWidth

The minimum width of the box.

Inherited From: SUI.Box#_minWidth

View source: Box.js, line 735

private SUI.Padding _padding

The box's padding.

Inherited From: SUI.Box#_padding

View source: Box.js, line 742

private SUI.Box _parent

The box's parent element.

Inherited From: SUI.Box#_parent

View source: Box.js, line 749

private int _right

The right position of the box.

Inherited From: SUI.Box#_right

View source: Box.js, line 756

private Object _selectedItem

Reference to the currently selected item.

View source: Accordion.js, line 213

private int _top

The top position of the box.

Inherited From: SUI.Box#_top

View source: Box.js, line 763

private int _width

The width of the box.

Inherited From: SUI.Box#_width

View source: Box.js, line 770

Methods

private _addOnClickHeader( Object item)

Add the onclick event handler on the header.

Parameters:
Name	Type	Description
Object	item	Accordion item object.

View source: Accordion.js, line 220

private _buildControl( Object[] arg)

Make all required boxes for the control.

Parameters:
Name	Type	Description
Object[]	arg	Argument object as passed to the constructor.

View source: Accordion.js, line 237

private int _contentHeight()

Calculate the available height for the content box.

Returns:

int Available height for the content box.

View source: Accordion.js, line 320

private _doClick( Object item)

On onclick set the selected item and redraw the control.

Parameters:
Name	Type	Description
Object	item	Accordion item object.

View source: Accordion.js, line 310

public absPos()

Get the absolute position (top/left) of this box on the page. Note: You can only use this function if the HTML content of the page is fully rendered.

Inherited From: SUI.Box#absPos

View source: Box.js, line 202

public add( SUI.Box child, int i)

Add a box to one of the client areas of the control.

Parameters:
Name	Type	Description
SUI.Box	child	The box to add to the control.
int	i	Index position of the client container to at the box to.

View source: Accordion.js, line 124

public addClass( String cls)

Add a CSS class name to the class list of the HTML element associated with the box.

Parameters:
Name	Type	Description
String	cls	the CSS class name to add

Inherited From: SUI.Box#addClass

View source: Box.js, line 229

public addListener( String type, Function listener)

Add/register a listener function. This way it is possible to register more than one listener function on one target.

Parameters:
Name	Type	Description
String	type	The listener type (i.e. "onClick", "onOK", etc).
Function	listener	The listener function.

Inherited From: SUI.Box#addListener

View source: Box.js, line 239

public SUI.Border border( SUI.Border b)

Get or set the border definition of the box.

Parameters:
Name	Type	Argument	Description
SUI.Border	b	<optional>	The new border definition (or none to use this method as a getter).

Returns:

SUI.Border the border definition of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#border

View source: Box.js, line 259

public int bottom( int b)

Get or set the bottom of the box.

Parameters:
Name	Type	Argument	Description
int	b	<optional>	The new bottom of the box (or none to use this method as a getter).

Returns:

int The bottom of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#bottom

View source: Box.js, line 302

public callListener( String type)

Call a listener function. Execute the default and additional listener functions. Note: the framework should not execute the default listeners directly but always through this method to ensure the execution of additional listener functions.

Parameters:
Name	Type	Description
String	type	The listener type (i.e. "onClick", "onOK", etc).

Inherited From: SUI.Box#callListener

View source: Box.js, line 275

public int clientHeight()

Get the client height of the box. The client height is the height of the box minus the top and bottom border and padding width.

Returns:

int The client height of the box.

Inherited From: SUI.Box#clientHeight

View source: Box.js, line 312

public int clientWidth()

Get the client width of the box. The client width is the width of the box minus the left and right border and padding width.

Returns:

int The client width of the box.

Inherited From: SUI.Box#clientWidth

View source: Box.js, line 322

public display()

Display the accordion control. Set the CSS size and position of all the headers and for the currently displayed content box.

View source: Accordion.js, line 132

public draw()

Draw the box on the screen. It executes a two phase process: a layout phase in which the size and positions of the box (and of it's contents, for more complex derivatives) is calculated and a display phase in which the CSS size and position of the box's (and possible it's child elements) is set.

Inherited From: SUI.Box#draw

View source: Box.js, line 344

public HTMLElementNode el()

Get the HTML element node of the box.

Returns:

HTMLElementNode the HTML element node of the box.

Inherited From: SUI.Box#el

View source: Box.js, line 353

public int height( int h)

Get or set the height of the box.

Parameters:
Name	Type	Argument	Description
int	h	<optional>	The new height of the box (or none to use this method as a getter).

Returns:

int The height of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#height

View source: Box.js, line 364

public layOut()

Lay out the accordion control. Calculate the size and position of all the headers and for the currently displayed content box.

View source: Accordion.js, line 151

public int left( int l)

Get or set the left of the box.

Parameters:
Name	Type	Argument	Description
int	l	<optional>	The new left of the box (or none to use this method as a getter).

Returns:

int The left of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#left

View source: Box.js, line 403

public int maxHeight( int mh)

Get or set the maximum height of the box.

Parameters:
Name	Type	Argument	Description
int	mh	<optional>	The new maximum height of the box (or none to use this method as a getter).

Returns:

int The maximum height of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#maxHeight

View source: Box.js, line 414

public int maxWidth( int mw)

Get or set the maximum width of the box.

Parameters:
Name	Type	Argument	Description
int	mw	<optional>	The new maximum width of the box (or none to use this method as a getter).

Returns:

int The maximum width of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#maxWidth

View source: Box.js, line 433

public int minHeight( int mh)

Get or set the minimum height of the box.

Parameters:
Name	Type	Argument	Description
int	mh	<optional>	The new minimum height of the box (or none to use this method as a getter).

Returns:

int The minimum height of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#minHeight

View source: Box.js, line 452

public int minWidth( int mw)

Get or set the minimum width of the box.

Parameters:
Name	Type	Argument	Description
int	mw	<optional>	The new minimum width of the box (or none to use this method as a getter).

Returns:

int The minimum width of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#minWidth

View source: Box.js, line 471

public SUI.Padding padding( SUI.Padding p)

Get or set the padding definition of the box.

Parameters:
Name	Type	Argument	Description
SUI.Padding	p	<optional>	The new padding definition (or none to use this method as a getter).

Returns:

SUI.Padding The padding definition of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#padding

View source: Box.js, line 490

public SUI.Box parent( SUI.Box p)

Get or set the parent box of the box. When setting the parent the box's element node will be appended to the parent box's HTML element node.

Parameters:
Name	Type	Description
SUI.Box	p	The parent box for this box (or none to use this method as a getter).

Returns:

SUI.Box The parent box of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#parent

View source: Box.js, line 510

public removeBox()

Remove a box from the DOM tree.

Inherited From: SUI.Box#removeBox

View source: Box.js, line 523

public removeClass( String cls)

Remove a CSS class name from the class list of the HTML element associated with the box.

Parameters:
Name	Type	Description
String	cls	The CSS class name to remove.

Inherited From: SUI.Box#removeClass

View source: Box.js, line 532

public int right( int r)

Get or set the right of the box.

Parameters:
Name	Type	Description
int	r	The new right of the box (or none to use this method as a getter).

Returns:

int The right of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#right

View source: Box.js, line 543

public setDim()

Set the CSS dimensions of this box and it's borders and padding. This is typically used in display functions to display boxes at the size and position that was calculated during layout.

Inherited From: SUI.Box#setDim

View source: Box.js, line 552

public setPos()

Set the CSS postion of this box. This is typically used in display functions to display boxes at position that was calculated during layout. Note: use setDim if you want to set the position and size of the box.

Inherited From: SUI.Box#setPos

View source: Box.js, line 600

public setRect( int | SUI.Box t, int l, int w, int h)

Set the top, left, width and height of a box in one go.

Parameters:
Name	Type	Argument	Description
int \| SUI.Box	t		The new top of the box or another reference box to copy the values from.
int	l	<optional>	The new left of the box (if the t parameter wasn't a reference Box).
int	w	<optional>	The new width of the box (if the t parameter wasn't a reference Box).
int	h	<optional>	The new length of the box (if the t parameter wasn't a reference Box).

Inherited From: SUI.Box#setRect

View source: Box.js, line 620

public int top( int t)

Get or set the top of the box.

Parameters:
Name	Type	Argument	Description
int	t	<optional>	The new top of the box (or none to use this method as a getter).

Returns:

int The top of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#top

View source: Box.js, line 641

public int width( int w)

Get or set the width of the box.

Parameters:
Name	Type	Argument	Description
int	w	<optional>	The new width of the box (or none to use this method as a getter).

Returns:

int The width of the box (or null if this method was used as a setter).

Inherited From: SUI.Box#width

View source: Box.js, line 652

Namespaces

Classes

SUI.Accordion

Constructor summary

Constant summary

Member summary

Method summary

Constructor

Parameters:

Constants

Members

Methods

Parameters:

Parameters:

Returns:

Parameters:

Parameters:

Parameters:

Parameters:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Returns:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Returns:

Parameters:

Parameters:

Returns:

Parameters:

Parameters:

Returns:

Parameters:

Returns: