Switch

Visual

A simple on/off switch made from a button. This element provides functionality to change the switch and get the current state.

Data type

<button id="my-switch" data-type="dizmo-switch"></button>

Constraints

Only works on button elements.

Usage

Manual initialization:

DizmoElements('#my-switch').dswitch();

To change the state of the button programmatically, call ‘state’. The same function is also used to get the current state.

DizmoElements('#my-switch').dswitch('state', 'off');
DizmoElements('#my-switch').dswitch('state', 'on');

To get the current state:

var state = DizmoElements('#my-switch').dswitch('state');

To react to state changes:

DizmoElements('#my-switch').on('click',function(){
    var state = DizmoElements('#my-switch').dswitch('state');
});

To change the height and width of the switch from the default values, use the ‘height’ and ‘width’ attributes.

DizmoElements('.my-switch').dswitch('height', 100);
DizmoElements('.my-switch').dswitch('width', 200);

To get the current height and width values:

var height = DizmoElements('.my-switch').dswitch('height');
var width = DizmoElements('.my-switch').dswitch('width');