djTabContainer - Dojo Tab Container

Contains panes on tabs.

Category

Extension Library

Syntax

<xe:djTabContainer attributes>content</xe:djTabContainer>
Table 1. Essential properties
Property Description
id Defaults to djTabContainer1, djTabContainer2, and so on.
style Specify width, height, and margin.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, defaultTabContent, dir, doLayout, id, lang, loaded, persist, rendered, rendererType, selectedTab, tabPosition, tabStrip, useMenu, useSlider
dojo dojoAttributes, dojoType, dragRestriction, tooltip
events onBlur, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A Tab Container control holds Tab Pane controls with the content of one tab displayed. The user clicks a tab to display its content.

This control is not tested against the latest accessibility standards. The recommended accessible path is the Tabbed Panel control.

Examples

This example shows three Tab Pane controls inside a Tab Container control.
<xe:djTabContainer id="djTabContainer1" style="width:500px; height:100px; margin:5px;">
	<xe:djTabPane id="djTabPane1" title="Title">
		<xp:text escape="true" id="computedField1"
			value="#{javascript:database.getTitle()}">
		</xp:text>
	</xe:djTabPane>
	<xe:djTabPane id="djTabPane2" title="File path">
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djTabPane>
	<xe:djTabPane id="djTabPane3" title="Creation date">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djTabPane>
</xe:djTabContainer>