Overview
The SK.UI.Button.OnOff class allows you to create on/off buttons.
Include Resource Files
/Shared/UIComponents/Internal/Buttons
css/on_off.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Buttons/css/on_off.css">Scripts/on_off.js
<script type="text/javascript" src="/Shared/UIComponents/Internal/Buttons/Scripts/on_off.js"></script>
The dependency files may already exist in the environment and you may not need to include them.
Default Options
Button Properties
Name | Description | Type | Default Value |
|---|---|---|---|
duration | The duration in milliseconds of the slide animation. | Integer | 200 |
checkedLabel | The button's label in checked state. | String | 'ON' |
uncheckedLabel | The button's label in unchecked state. | String | 'OFF' |
resizeHandle | Whether the slide handle determines its size based on the labels length. | Boolean | true |
resizeContainer | Whether the button container determines its size based on the labels length. | Boolean | true |
disabled | Whether the button is disabled or not. | Boolean | false |
caption | The text that appears next to the button. | String | false |
classNames | Allows you to add custom class names for any button element. | Object | See button classes |
offsets | Allows you to control the offset of the labels. | Object | { knobRadius: 2 } |
Button Classes
Name | Description | Default Value |
|---|---|---|
stateon | This class applies to the whole button when it is in checked state. | 'oobtn-state-on' |
stateoff | This class applies to the whole button when it is in unchecked state. | 'oobtn-state-off' |
status | The checkbox (hidden by default) which holds the state of the button. | 'oobtn-rendered' |
caption | The caption of the button. | 'oobtn-caption' |
container | The button container. This does not include the caption. | 'oobtn-container' |
labelOn | The checked state label. | 'oobtn-label-on' |
labelOff | The unchecked state label. | 'oobtn-label-off' |
handle | The slide handle. | 'oobtn-handle' |
handleCenter | The central portion of the slide handle. | 'oobtn-handle-center' |
handleRight | The right portion of the slide handle. | 'oobtn-handle-right' |
disabled | This class applies when the button is disabled. | 'oobtn-disabled' |
Methods
Name | Description | Parameters | Returns |
|---|---|---|---|
enable | Enable the button. | - | - |
disable | Disable the button. | - | - |
turnOn | Change button state to checked. | - | - |
turnOff | Change button state to unchecked. | - | - |
isOn | Checks if button is checked. | - | Boolean |
isOff | Checks if button is unchecked. | - | Boolean |
isDisabled | Checks if button is disabled. | - | Boolean |
isEnabled | Checks if button is enabled. | - | Boolean |
destroy | Removes the button UI leaving only the checkbox. | - | - |
Events
Name | Description | Arguments |
|---|---|---|
click | Triggers on clicking the button. | - |
change | Triggers on button state change. | - |
Examples
Initializing a basic on/off button.
Initializing a small on/off button with a caption and attaching a custom click event.
Setting up custom labels and an event. The event is handled in the manager object.