ToggleSwitch object
TOC
Réduire la table des matières
Développer la table des matières

WinJS.UI.ToggleSwitch object

[This documentation is preliminary and is subject to change.]

Applies to: Metro style apps only

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" />


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

Members

The ToggleSwitch object has these types of members:

Events

The ToggleSwitch object has these events.

EventDescription
change Event

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

 

Methods

The ToggleSwitch object has these methods.

MethodDescription
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.

PropertyDescription

checked Property

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

disabled Property

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

element

Gets the DOM element that hosts the ToggleSwitch.

labelOff Property

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

labelOn Property

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

title Property

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 classDescription

win-label-off

Styles the labelOff text.

win-label-on

Styles the 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-toggle

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:

Hh701411.toggleswitch(fr-fr,WIN.10).png

Requirements

Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta

Namespace

WinJS.UI

Library

Ui.js

 

 

Build date: 2/10/2012

Ajouts de la communauté

AJOUTER
Afficher:
© 2017 Microsoft