djTabPane - Dojo Tab Pane

Provides content for one pane in a tab container.

Category

Extension Library

Syntax

<xe:djTabPane attributes>content</xe:djTabPane>
Table 1. Essential properties
Property Description
id Defaults to djTabPane1, djTabPane2, and so on.
title Applies a label to the tab. Use tooltip for accessibility.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, closable, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, partialEvents, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType, tabUniqueKey
dojo dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A TabContainer control holds TabPane 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>