This time I will share jQuery Plugin and tutorial about Smooth Animated Toggle Control Plugin With jQuery and Bootstrap – Bootstrap Toggle, hope it will help you in programming stack.
Bootstrap Toggle is a jQuery plugin that turns the checboxes into animated and highly customizable toggle controls based on templates with Bootstrap 3 and 4.
The Bootstrap 4 Version is available here.
Basic Usage:
1. Load jQuery library and Twitter’s Bootstrap framework in the Html page.
1 |
<link rel="stylesheet" href="bootstrap.min.css"> |
2 |
<script src="bootstrap.min.js"></script> |
3 |
<script src="jquery.min.js"></script> |
2. Load the jQuery Bootstrap toggle plugin’s stylesheet and Javascript in the page.
1 |
<link href="css/bootstrap-toggle.css" rel="stylesheet"> |
2 |
<script src="js/bootstrap-toggle.js"></script> |
3. Create a normal checbox input with the data-toggle="toggle" attribute for auto initialization.
1 |
<input type="checkbox" checked data-toggle="toggle"> |
4. You can also initialize the plugin in the Javascript.
2 |
$('input[type="checkbox"]').bootstrapToggle(); |
5. Override the following settings during initialization. You can also pass them using Html5 data-* attributes embedded in the input tag.
6. Public methods.
02 |
$('input[type="checkbox"]').bootstrapToggle() |
05 |
$('input[type="checkbox"]').bootstrapToggle('destroy') |
08 |
$('input[type="checkbox"]').bootstrapToggle('on') |
11 |
$('input[type="checkbox"]').bootstrapToggle('off') |
14 |
$('input[type="checkbox"]').bootstrapToggle('toggle') |
17 |
$('input[type="checkbox"]').bootstrapToggle('enable') |
20 |
$('input[type="checkbox"]').bootstrapToggle('disable') |
Changelog:
2020-02-16
- Added Bootstrap 4 version.
This awesome jQuery plugin is developed by gitbrent. For more Advanced Usages, please check the demo page or visit the official website.
