Touch Enabled & Skinnable Toggle Switches with jQuery - asSwitch

asSwitch is a jQuery plugin used to turns the normal checkbox into an intuitive, skinnable, draggable and touch compatible toggle switch. Currently comes with 5 built-in skins, you can override them yourself by adding your own styles in the asSwitch.css.

How to use it:

1. Load the jQuery library and the jQuery asSwitch plugin in the Html page.

<link rel="stylesheet" href="css/asSwitch.css">

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/jquery-asSwitch.js"></script>

2. Call the plugin on the existing checbox and specify a skin you wish to use.

$('.demo').asSwitch({
  skin: 'skin-3'
});

3. Available options.

// skin-3, skin-4, skin-6, skin-8, skin-9
skin: 'default',

// Enable draggable
dragable: true,

// Enable clickable
clickable: true,

// Disable the toggle switch
disabled: false,

// on/off text
onText: 'ON',
offText: 'OFF',

// Checked on initialization
checked: true,

// Animation speed
animation: 200

4. Public methods.

// set the state of switch
$(".sw-3").asSwitch("set");

// get the current state of switch
$(".sw-3").asSwitch("get");

// add a enable class to asSwitch elment
$(".sw-3").asSwitch("enable");

// remove the enable class
$(".sw-3").asSwitch("disable");

// remove asSwitch Dom emement and unbound all events 
$(".sw-3").asSwitch("destroy");

Change log:

v0.2.3 (2017-09-11)

• JS update

---

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.