djToggleButton - Dojo Toggle Button

Toggles between a checked value and an unchecked value.

Category

Dojo Form

Syntax

<xe:djToggleButton attributes>content</xe:djToggleButton>
Table 1. Essential properties
Property Description
id Defaults to djToggleButton1, djToggleButton2, and so on.
value Binds the control to a data element.
label Specifies the display text on the button.
checkedValue Specifies the value of the button when toggled to the checked position.
uncheckedValue Specifies the value of the button when toggled to the unchecked position.
Table 2. All properties
Category Properties
accessibility alt, tabIndex, title, waiRole, waiState
basics binding, dir, disabled, id, immediate, label, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, showLabel, type
data checkedValue, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, uncheckedValue, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling disableTheme, iconClass, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a button appears on the page. Clicking the button toggles between the checked value and the unchecked value.

This button does not automatically submit to the server. It toggles its value on the client.

This control is not tested against the latest accessibility standards. The recommended accessible path is the Check Box control.

Examples

This example consists of a Toggle Button bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.
<xp:table>
	<xp:tr>
		<xp:td>Toggle Button</xp:td>
		<xp:td>
			<xe:djToggleButton id="djToggleButton1"
				value="#{sessionScope.djToggleButton1}" checkedValue="blue"
				uncheckedValue="red"
				label="#{javascript:sessionScope.djToggleButton1}">
			</xe:djToggleButton>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td></xp:td>
		<xp:td>
			<xp:button value="submit" id="button1"><xp:eventHandler event="onclick" submit="true" 
			refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td>
			<xp:text escape="true" id="computedField1"
				value="#{sessionScope.djToggleButton1}">
			</xp:text>
		</xp:td>
	</xp:tr>
</xp:table>