WinJS.UI.ToggleSwitch object

  • Article

A control that lets the user switch an option between two states: on (checked is set to true) and off (checked is set to false).

Syntax

<div data-win-control="WinJS.UI.ToggleSwitch">
</div>

var object = new WinJS.UI.ToggleSwitch();

Members

The ToggleSwitch object has these types of members:

  • Constructors
  • Events
  • Methods
  • Properties

Constructors

The ToggleSwitch object has these constructors.

Constructor Description
ToggleSwitch

Creates a new ToggleSwitch.

 

Events

The ToggleSwitch object has these events.

Event Description
onchange Event

Occurs when the ToggleSwitch control is flipped to on (checked == true) or off (checked == false).

 

Methods

The ToggleSwitch object has these methods.

Method Description
addEventListener

Registers an event handler for the specified event.
dispatchEvent

Raises an event of the specified type and with additional properties.
dispose

Releases resources held by this ToggleSwitch. Call this method when the ToggleSwitch is no longer needed. After calling this method, the ToggleSwitch becomes unusable.
handleEvent

Handles the specified event.
raiseEvent

Raises an event of the specified type and with additional properties.
removeEventListener

Removes an event handler that the addEventListener method registered.

 

Properties

The ToggleSwitch object has these properties.

Property Access type Description

checked Property

Read/write

Gets or sets a value that specifies whether the control is on or off.

disabled Property

Read/write

Gets or sets a value that specifies whether the control is disabled.

element

Read-only

Gets the DOM element that hosts the ToggleSwitch.

labelOff Property

Read/write

Gets or sets the text that displays when the ToggleSwitch is off (checked is set to false).

labelOn Property

Read/write

Gets or sets the text that displays when the ToggleSwitch is on (checked is set to true).

title Property

Read/write

Gets or sets the main text for the ToggleSwitch control. This text is always displayed, regardless of whether the control is switched on or off.

 

Remarks

Styling the ToggleSwitch

CSS classes

To customize the ToggleSwitch, you can define your own styles for these Cascading Style Sheets (CSS) classes (defined by the Windows Library for JavaScript style sheets):

CSS class Description

win-label

Styles the labelOff and labelOn text.

win-switch

Styles the slider that enables the user to switch the state of the ToggleSwitch.

win-title

Styles the title text of the ToggleSwitch.

win-toggleswitch

Styles the entire ToggleSwitch.

 

Examples

Here's an example of a simple ToggleSwitch:

 <div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'GPS'}">
 </div>

When you run the code, you see this ToggleSwitch:

Requirements

Minimum WinJS version

WinJS 1.0

Namespace

WinJS.UI