前端工程师在写页面的时候，因客户要求，有些地方要加一些开关按钮，虽然自己也能写出来，但效果有时候不尽人意，既要保持按钮本身的美观，还要给它加一个小小的滑动动画过度并监听它的开关状态。是不是懒得写啊。。不如投机取巧一把，用用下面这个ios7风格的开关组件，把你的html页面变得美丽多彩~

Switchery

嗯，它的名字就是switchery.js。看一眼效果~

Chrome, Firefox, Opera, Safari, IE8+（IE8以上已经不错了，毕竟微软自己都放弃了IE6、7）

引入方式：

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

一个css和一个js，还好~

初始化：

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

配置：

默认配置与选项：

defaults = {
 color : '#64bd63', //开关元件的颜色(十六进制或RGB值)
 secondaryColor : '#dfdfdf', //次要的背景颜色和边框的颜色,当开关是关闭的
 jackColor : '#fff', //抬起/按下元素的默认颜色
 jackSecondaryColor: null, //第二抬起/按下元素的默认颜色
 className : 'switchery', //开关元件的类名(默认样式switchery.css)
 disabled : false, //启用或禁用单击事件和改变开关的状态(布尔值)
 disabledOpacity : 0.5, //不透明度，当不可见时为true(范围0-1)
 speed : '0.1s', //转型需要的时间长度,动画效果长度。
 size : 'default' //样式的大小（small or large）
}

举个例子：

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

还有其他的一些属性与用法，看客老爷们可以来这个网站参考下

http://abpetkov.github.io/switchery/

我用的感觉还可以~大家觉得怎么样啊，可以去试下昂