WinJS.UI.ToggleSwitch object
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 |
---|---|---|
Read/write |
Gets or sets a value that specifies whether the control is on or off. |
|
Read/write |
Gets or sets a value that specifies whether the control is disabled. |
|
Read-only |
Gets the DOM element that hosts the ToggleSwitch. |
|
Read/write |
Gets or sets the text that displays when the ToggleSwitch is off (checked is set to false). |
|
Read/write |
Gets or sets the text that displays when the ToggleSwitch is on (checked is set to true). |
|
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 |
|
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 |