Creating iOS Style On / Off Toggles With JavaScript And CSS3 – Switch.js

Preview:

Description:

Just another JavaScript plugin used for creating customizable, CSS3 animated, iOS-style on/off toggle switches from regular checkbox inputs.

How to use it:

First you need to load the following necessary resources in the webpage.

<link rel="stylesheet" href="dist/switch.css">
<script src="dist/switch.js"></script>

Create a normal checkbox on the webpage.

<input type="checkbox" class="demo">

The JavaScript to render a new toggle switch on the webpage.

var mySwitch = new Switch('.demo');

Apply the following customization options to the toggle switch.

var mySwitch = new Switch('.demo',{
    // default | small | large
    size: 'default',
    // state of switch and checbox
    checked: undefined,
    // text for ON state
    onText: 'Y',
    // text for OFF state
    offText: 'N',
    // custom colors
    onSwitchColor: '#64BD63',
    offSwitchColor: '#fff',
    onJackColor: '#fff',
    offJackColor: '#fff',
    // show text
    showText: false,
    // disable the toggle switch
    disabled: false,
    // callback functions
    onInit: noop,
    onChange: noop,
    onRemove: noop,
    onDestroy: noop
    
});

API methods.

var mySwitch = new Switch('.demo',{
    // options here
});
// toggle on
mySwitch.on();
// toggle off
mySwitch.off();
// toggle
mySwitch.toggle();
// disable
mySwitch.disable();
// re-enable
mySwitch.enable();
// destroy
mySwitch.destroy();
// remove
mySwitch.remove();