Touch Enabled & Skinnable Toggle Switches with jQuery - asSwitch
File Size: | 228 KB |
---|---|
Views Total: | 12121 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.