This time I will share jQuery Plugin and tutorial about Touch Enabled & Skinnable Toggle Switches with jQuery – asSwitch, hope it will help you in programming stack.
| File Size: | 228 KB |
|---|---|
| Views Total: | 11846 |
| 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.
1 |
<link rel="stylesheet" href="css/asSwitch.css"> |
2 |
3 |
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> |
4 |
<script src="src/jquery-asSwitch.js"></script> |
2. Call the plugin on the existing checbox and specify a skin you wish to use.
1 |
$('.demo').asSwitch({ |
2 |
skin: 'skin-3' |
3 |
}); |
3. Available options.
01 |
// skin-3, skin-4, skin-6, skin-8, skin-9 |
02 |
skin: 'default', |
03 |
04 |
// Enable draggable |
05 |
dragable: true, |
06 |
07 |
// Enable clickable |
08 |
clickable: true, |
09 |
10 |
// Disable the toggle switch |
11 |
disabled: false, |
12 |
13 |
// on/off text |
14 |
onText: 'ON', |
15 |
offText: 'OFF', |
16 |
17 |
// Checked on initialization |
18 |
checked: true, |
19 |
20 |
// <a href="https://www.jqueryscript.net/animation/">Animation</a> speed |
21 |
animation: 200 |
4. Public methods.
01 |
// set the state of switch |
02 |
$(".sw-3").asSwitch("set"); |
03 |
04 |
// get the current state of switch |
05 |
$(".sw-3").asSwitch("get"); |
06 |
07 |
// add a enable class to asSwitch elment |
08 |
$(".sw-3").asSwitch("enable"); |
09 |
10 |
// remove the enable class |
11 |
$(".sw-3").asSwitch("disable"); |
12 |
13 |
// remove asSwitch Dom emement and unbound all events |
14 |
$(".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.
source : jqueryscript.net
