EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

WinJS.UI.ToggleSwitch object

Applies to Windows and Windows Phone

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

The ToggleSwitch object has these constructors.

ConstructorDescription
ToggleSwitch

Creates a new ToggleSwitch.

 

Events

The ToggleSwitch object has these events.

EventDescription
onchange 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.

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.

PropertyAccess typeDescription

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 classDescription

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:

ToggleSwitch control

Requirements

Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI

Library

Ui.js

 

 

표시:
© 2014 Microsoft