Mojo.Widget.ToggleButton

Namespace Detail

Overview

Like the CheckBox (and similar to the RadioButton), the ToggleButton is a widget for displaying and controlling a binary state value. Mojo's ToggleButton will switch between two states each time it is tapped.

Declaration 

<div x-mojo-element="ToggleButton" id="togglebuttonId"
  class="togglebuttonClass"  name="togglebuttonName"></div>
Properties Required Value Description
x-mojo-element Required ToggleButton Declares the widget as type 'ToggleButton'.
id Required Any String Identifies the widget element for use when instantiating or rendering.

Events 

Mojo.Event.listen(this.controller.get("togglebuttonId"),
  Mojo.Event.propertyChange, this.handleUpdate)
Event Type Value Event Handling
Mojo.Event.propertyChange model:model attached to the widget property: model property, value: value of the checkbox.

Instantiation 

this.controller.setupWidget("togglebuttonId",
  this.attributes = {
      trueValue: "On",
      falseValue: "Off"
  },
  this.model = {
      value: false,
      disabled: false
  }
);

Attribute Properties

Attribute Property Type Required Default Description
modelProperty String Optional value Model property name for togglebutton state.
disabledProperty String Optional disabled Model property name for disabled boolean.
trueValue String Optional true Value to set model property when true.
trueLabel String Optional "On" Label when toggle is true.
falseValue String Optional false Value to set model property when false.
falseLabel String Optional "Off" Label when toggle is false.
fieldName String Optional   DEPRECATED Identifier for the value of the toggle button; used when the toggle button is used in html forms.
inputName String Optional   Identifier for the value of the toggle button; used when the toggle button is used in html forms.

Model Properties

Model Property Type Required Default Description
value User-defined Required none Current value of widget.
disabled Boolean Optional FALSE If true, ToggleButton is inactive.

Methods

The ToggleButton widget has no methods.