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:
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. |
| 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. |
| ToggleSwitch |
Creates a new ToggleSwitch. |
Properties
The ToggleSwitch object has these properties.
| Property | Description |
|---|---|
|
Gets or sets a value that specifies whether the control is on or off. | |
|
Gets or sets a value that specifies whether the control is disabled. | |
|
Gets the DOM element that hosts the ToggleSwitch. | |
|
Gets or sets the text that displays when the ToggleSwitch is off (checked is set to false). | |
|
Gets or sets the text that displays when the ToggleSwitch is on (checked is set to true). | |
|
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 CSS classes (defined by the Windows Library for JavaScript style sheets):
| CSS class | Description |
|---|---|
|
win-label | |
|
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 supported client | Windows 8 [Windows Store apps only] |
|---|---|
|
Minimum supported server | Windows Server 2012 [Windows Store apps only] |
|
Namespace |
WinJS.UI |
|
Library |
|
Build date: 12/5/2012
