DomAPI Home
DomAPI

domapi.Pagecontrol

See also: Elm
See also: Component

Modeled after a standard tabcontrol. You can manually add each pages content, insert existing page elements, or load in an external file. Makes for very expressive page layouts. Pagecontrol uses the Notebook and Tabset components, which allow it to be fully skinnable.

 

Pagecontrol Example: system, aqua

Pagecontrol Constructor

var pagecontrol1 = domapi.Pagecontrol({
  orientation  : top,
  tabsetOffset : 0 
});
Also inherits the construtor arguments of Elm and Component.

Constructor Details
Parameter Type Default Description
orientation top  Where the tabs are to be placed. Values are top or bottom. 
tabsetOffset integer 0  Amount the tabs are to overlap the content. Should be zero for most needs. Some themes may alter this. 

Events unique to domapi.Pagecontrol

Also has the same events as Elm and Component.

Methods unique to domapi.Pagecontrol

Also has the same methods as Elm and Component.

Properties unique to domapi.Pagecontrol

Also has the same properties as Elm and Component.
Events
onchange ( index )

Fires after the user has clicked on a tab. Passes the index of the new tab to the event, or you can refer to Pagecontrol.tabIndex .

Parameters:
Parameter Type Required Default Description
index integer Y     
back to top
Methods
addPage ( value, type, url, delayLoad, refreshPage ) type : HTMLElement

Adds a brand new page to the control and returns a reference to the new page. The tab's caption will be set to text. The type of content to make the page out of is passed in controlType. Currently, this must be either "P", "IFRAME" or "DIV".
If "IFRAME" is used, then the url parameter is the initial path of the page to display. Otherwise, url is not used.
During runtime, you can change the page displayed by using the Pagecontrol.loadPage() method. For example: pc1.loadPage(2, "www.mycoolsite.com");

NOTE: IE5 cannot deal with dynamic IFRAMES. To use IFRAMES as pages, you need to include it in your page as HTML then use Pagecontrol.assignElement() to add it into the control.

Example:
  elm1.addPage({text:"Tab Caption"});

elm1.addPage({text:"My Site", type:"IFRAME", url:"www.mycoolsite.com"});
Parameters:
Parameter Type Required Default Description
value String Y   The caption for the new tab. NOTE, you can also use text instead of value. 
type String   DIV  The type of element to make the new page out of. Examples: DIV, IFRAME, etc.. 
url String     If the type is IFRAME, then this is the url to load into it. 
delayLoad boolean   false  If type is IFRAME, then this parameter can affect whether or not the page is loaded from the server before the page is shown. 
refreshPage boolean   false  If type is IFRAME, then this parameter controls whether the page is relaoded each time it is shown. 
back to top
assignElement ( id, index, overwrite, value )

This powerful method takes an existing element from the page and moves it into a page of the control.
id is the ID of a DOMElement to assign to a page.
index is the page index to perform the assignment on. If index is null, a new page will be added to the control to hold the assigned element. If index is greater than the current number of pages, the control will insert enough blank pages to accomodate it.
overwrite is a flag that tell the control whether or not to append the assigned control the the page's existing content, or to completely overwrite it. overwrite is true by default.
If a value is passed, the tab of the assigned page will have it's caption changed to this value.

Example:
  // overwrite tab one's content with 'div1'
elm1.assignElement({id:'div1', index:0});

//  set page 5's content to 'div2' and set it's tab to 'DIV2'.  
// add empty pages if needed
elm1.assignElement({id:'div2', index:4, value:'DIV2'});

// overwrite tab 2's content with 'div3' and set the tab's caption
elm1.assignElement({id:'div3', index:1, overwite:true, value:'DomAPI Rules'});

// append 'div4' to page 2's content.  do no overwrite
elm1.assignElement({id:'div4', index:1, overwrite:false});
Parameters:
Parameter Type Required Default Description
id String Y   The id of the element to be assigned. 
index integer     Where in the control to insert the new page, or which existing page to overwite. Omit this parameter to have the new page added at the end. 
overwrite boolean   true  If you specify an existing index, this controls whether any existing content is kept or removed. 
value String     Caption of the new tab. You can also use text instead. 
back to top
clear ()

Removes all the tabs and page.

back to top
loadPage ( index, url )

If a page uses an IFRAME, this method will load an url into it.

Parameters:
Parameter Type Required Default Description
index integer Y   The page index. 
url String Y     
back to top
setIndex ( index )

Selects the specfied page.

Parameters:
Parameter Type Required Default Description
index integer Y     
back to top
setTabValue ( index, value )

Changes the value or 'caption' of a specified tab.

Parameters:
Parameter Type Required Default Description
index integer Y     
value String Y     
back to top
Properties
pages type : Array

Each added page shows up in this collection. Each page is an Elm() and has a DA_TYPE of "PAGECONTROLPAGE". Currently, pages must be either <P>, <IFRAME> or <DIV>.
Pages are added via the addPage() method.

back to top
tabIndex type : integer default value : -1

Index of the currently selected tab. By default, the first tab is selected.

This value is read-only. To change it, use Pagecontrol.setIndex()

back to top
tabs type : Array

This is a collection of each tab Object that have been added. These tabs are are type Elm().
Each tab has an index property. You should not assign onclick events to the tabs as they have such events assigned internally.
Tabs are added via the addPage() method.

back to top
DHTML by www.domapi.com