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

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


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


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

// toggle off;

// toggle

// disable

// re-enable

// destroy

// remove

You Might Be Interested In:

Leave a Reply