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

Category: Form , Javascript , Recommended | June 13, 2016
Author: zhiyul
Views Total: 3,956
Official Page: Go to website
Last Update: June 13, 2016
License: MIT

Preview:

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

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();

You Might Be Interested In:


Leave a Reply