想要不一样的 checkbox？试试 iOS style Switch 吧！：）
Switch
Live Preview
Installation
Standalone:
<link rel="stylesheet" href="dist/switch.css" /> <script src="dist/switch.js"></script>
npm:
$ npm install weatherstar-switch --save-dev
Usage
<input type="checkbox" class="checkbox-switch" />
standalone version
var el = document.querySelector('.checkbox-swtich'); 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-swtich'); var mySwitch = new Switch(el, options);
Settings and Defaults
defaults = { size : 'default' , checked : undefined , onText : 'Y' , offText : 'N' , onSwitchColor : '#64BD63' , offSwitchColor : '#fff' , onJackColor : '#fff' , offJackColor : '#fff' , showText : false , disabled : false , onInit : function(){} , onChange : function(){} , onRemove : function(){} , onDestroy : function(){} };
-
size: size of switch element, can bedefault|small|large -
checked: state of switch and checbox, ifundefinedthe switch state according to the checkbox -
onText: text in the jack when switch ON -
offText: text in the jack when switch OFF -
onSwitchColor: color of checked switch element -
offSwitchColor: color of unchecked switch element -
onJackColor: color of checked jack element -
offJackColor: color of unchecked jack element -
showText: show or hide text in the jack of switch -
disabled: enable or disable click events and changing the state of the switch -
onInit: called when switch init finish -
onChange: called when original checkbox'scheckedchange -
onRemove: called whenmySwitch.remove() -
onDestroy: called whenmySwitch.destroy()
API
.on()
Set switch ON.
.off()
Set switch OFF.
.toggle()
Toggle switch.
.disable()
Disable events bind to switch.
.enable()
Enable events bind to switch.
.destroy()
Remove all events bind to switch.
.remove()
Remove switch form DOM and show the checkbox.
License
MIT ©zhiyul
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
