:rabbit: A simple and powerful switch for checkbox.
:rabbit: A simple and powerful iOS style switch for checkbox.
<link rel="stylesheet" href="dist/switch.css" />
<script src="dist/switch.js"></script>
$ npm install weatherstar-switch --save-dev
<input type="checkbox" class="checkbox-switch" />
standalone version
var el = document.querySelector('.checkbox-switch');
var mySwitch = new Switch(el, options);
work with module bundle
require('weatherstar-switch/dist/switch.css');
var Switch = require('weatherstar-switch');
var el = document.querySelector('.checkbox-switch');
var mySwitch = new Switch(el, options);
defaults = {
size : 'default'
, checked : undefined
, onText : 'Y'
, offText : 'N'
, onSwitchColor : '#64BD63'
, offSwitchColor : '#fff'
, onJackColor : '#fff'
, offJackColor : '#fff'
, showText : false
, disabled : false
, onInit : function(){}
, beforeChange : function(){}
, onChange : function(){}
, beforeRemove : function(){}
, onRemove : function(){}
, beforeDestroy : function(){}
, onDestroy : function(){}
};
size
: size of switch element, can be default
| small
| large
checked
: state of switch and checbox, if undefined
the switch state according to the checkboxonText
: text in the jack when switch ONoffText
: text in the jack when switch OFFonSwitchColor
: color of checked switch elementoffSwitchColor
: color of unchecked switch elementonJackColor
: color of checked jack elementoffJackColor
: color of unchecked jack elementshowText
: show or hide text in the jack of switchdisabled
: enable or disable click events and changing the state of the switchonInit
: called when switch init finishbeforeChange
: called before original checkbox's checked
changeonChange
: called when original checkbox's checked
changebeforeRemove
: called before remove switch element from DOM
onRemove
: called when remove switch element from DOM
donebeforeDestroy
: called before remove all events on switch element
onDestroy
: called when remove all events on switch element
doneswitch-danger
switch-primary
switch-black
switch-success
switch-warning
switch-info
switch-transparent
Get switch element checked status.
Set switch ON.
Set switch OFF.
Toggle switch.
Disable events bind to switch.
Enable events bind to switch.
Remove all events bind to switch.
Remove switch form DOM and show the checkbox.
MIT © zhiyul