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

SK.UI.Button 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'



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



Name Description Arguments
click Triggers on clicking the button. -
change Triggers on button state change. -



Initializing a basic on/off button.

var onoffButton = new SK.UI.Button.OnOff( window ).inject( document.body );


Initializing a small on/off button with a caption and attaching a custom click event.

var onoffButton = new SK.UI.Button.OnOff( window, {
   caption     : 'My Button'
   event       : 'eventName',
   classNames  : {
      container   : 'oobtn-container oobtn-small'
}).inject( document.body );


Setting up custom labels and an event. The event is handled in the manager object.

var onoffButton = new SK.UI.Button.OnOff( window, {
   checkedLabel   : 'YES',
   uncheckedLabel : 'NO',
   event          : 'action'
}).inject( document.body );
window.addEvent('action', function () {
   alert('The dropdown button is clicked.');