WinJS.UI.ToggleSwitch object

Article
01/26/2017

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

Partager via