switchery是一个简单的组件，它可以帮助您通过几个简单的步骤将默认的HTML复选框输入转换为漂亮的iOS 7样式的开关。您可以轻松地自定义开关，以便它们与您的设计完美匹配。

所有现代浏览器都支持：Chrome、Firefox、Opera、Safari、IE8+

switchery使用

1.导入switchery主文件

<link rel="stylesheet" href="dist/switchery.css" />
<script src="dist/switchery.js"></script>

3.html代码

<input type="checkbox" class="js-switch" checked />

4.初始化switchery

var elem = document.querySelector('.js-switch');
 //size 设置禁用可用按钮的大小、secondaryColor：设置右边的颜色为红色
var switchery = new Switchery(elem,{size:"large",secondaryColor:"red"});

以上四步已经能使用switchery

switchery的常用的方法

1.设置switchery的禁用、可用样式

/**
 * 设置“禁用/可用”的按钮样式
 * @param switchElement
 * @param checkedBool
 */
function setSwitchery(switchElement, checkedBool) {
 if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
 switchElement.setPosition(true);
 switchElement.handleOnchange(true);
 }
 }

2. 当“禁用/可用”按钮发生改变时,获取当前状态

elem.onchange = function() {
 
//获取按钮的选中状态
isChecked = elem.checked;
 
};

3.设置按钮的可用、禁用状态

//禁用
switchery.disable();
 
//可用
switchery.enable();

-END-