domapi.Sidebar
See also: ElmSee also: Component
Sidebar mimics the 'task sidebar' in Microsoft Windows XP. Provides collapsible sections just like Viewbar , but allows any HTML content to be included within the sections and is infinitely more skinnable.
A Sidebar is composed of a set of panels. Panels are added to the control using Sidebar.addPanel(). Each pane has references to its components: header, body and caption. For instance, to set the body of a pane, you can do
sidebar1.panels[2].body.innerHTML = "this is the contents";Likewise, you can change the caption of a pane using
sidebar1.panels[2].caption.innerHTML = "New Caption";
Rather than set the body of a panel manually, you may find it easier to insert an existing element into it. This can be accomplished during the call to Sidebar.addPanel() by passing it in the element argument.
Sidebar Example: system, aqua
Sidebar Constructor
var sidebar1 = domapi.Sidebar({
doBorder : false,
doAllowAllOpen : true,
doAllowClosing : true,
doAllowHeaderClick : false,
doAllowHeaderDoubleClick : true
});
Constructor Details
| Parameter | Type | Default | Description |
|---|---|---|---|
| doBorder | boolean | false | Whether or not to display a border around the control. |
| doAllowAllOpen | boolean | true | When true, the user could potentially have all the panels open at once. When false, only one panel can be opened at a time. |
| doAllowClosing | boolean | true | When false, the expand/collapse button is not shown for each panel. |
| doAllowHeaderClick | boolean | false | When true, single-clicking the header will expand/collapse panels. |
| doAllowHeaderDoubleClick | boolean | true | When true, double-clicking the header will expand/collapse panels. |
Methods unique to domapi.Sidebar
Properties unique to domapi.Sidebar
| addPanel( arg ) |
|---|
The "arg" parameter fed to this method is an inline Object. See below for accepted parameters.
Any parameters not listed here that you add may also be attached to any returned Object.
Adds a new panel to the Sidebar and returns a reference to it.
Example:
sidebar1.addPanel({caption:"Site", opened:false});
Available "arg" Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| caption | String | Y | The title of the new panel. | |
| enabled | boolean | true | Whether or not the panel should start out enabled. | |
| opened | boolean | true | Whether or not the panel should start out opened or collapsed. | |
| element | HTMLElement | An element that is to be transfered into the body of the new pane. Bodies are otherwise blank to start out with. | ||
| doAllowClosing | boolean | true | When false, the expand/collapse button is not shown for the panel. |
| closePanel ( index ) |
|---|
Closes the specified panel.
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| index | integer | Y |
| openPanel ( index ) |
|---|
Expands the specified panel. If the doAllowAllOpen property of the Sidebar was set to false, all the other panels will be closed.
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| index | integer | Y |
| setEnabled ( enabled, index ) |
|---|
Toggles the enabled state of the control. If the second argument is present (index) then only that panel's enabled state is toggled.
Parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| enabled | boolean | Y | ||
| index | integer |
| panels | type : Collection |
|---|
An array of every panel in the control.
