Toggler
Toggler allows you to create very simple toggles/switches with minimal js. I made it whilst working @ Glider.
Requirements
jquery
Examples
http://cam-stitt.github.io/toggler/
Installing
Toggler can be installed through bower:
bower install toggler
Usage
Toggler is easy to use. Simply call toggler()
on a checkbox input.
<input type="checkbox" class="toggled">
$(".toggled").toggler();
Configuration Options
There are also configuration options to override the default values for Toggler:
Initial State
<input type="checkbox" data-initial-state="true" class="toggled">
<input type="checkbox" data-initial-state="false" class="toggled">
Labels
<input type="checkbox" data-left-label="on" data-right-label="off" class="toggled">
Classes
You can add your own custom classes. Here is an example using Bootstrap btn-group:
<input type="checkbox" data-left-class="btn btn-success" data-right-class="btn btn-danger" data-wrap-class="btn-group" class="toggled">
Through JS
$(".toggled").toggler({
"leftLabel": "Yes Please",
"rightLabel": "No Thanks",
"initialStat": true
"leftClass": "btn btn-success",
"rightClass": "btn btn-danger",
"wrapClass": "btn-group"
});
Toggler is a new project and there will be more features added over time. Some of these features include:
- Reverse order of toggles (optionally make 'off' first)