Switch.js是一款可以将任意CheckBox控件转换为iOS样式滑动开关按钮的JS插件。Switch.js使用简单，功能强大，它可以控制滑动按钮的尺寸，颜色，状态等。

安装

可以通过npm来安装switch.js滑动按钮插件。

$ npm install weatherstar-switch --save-dev                  
                

使用方法

在页面中引入switch.css和switch.js文件。

<link rel="stylesheet" href="path/to/switch.css">
<script src="path/to/switch.js"></script>    
                

HTML结构

可以将任意的checkbox控件转换为滑动按钮。

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

初始化插件

可以通过new Switch()方法来创建一个swith实例。

var el = document.querySelector('.checkbox-swtich');
var mySwitch = new Switch(el, options);
                

配置参数

switch.js滑动按钮插件的默认配置参数如下：

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：滑动按钮的尺寸，可以是default | small | large。
• checked：滑动按钮的状态。如果是undefined，在滑动按钮的状态根据checkbox来确定。
• onText：ON状态的文本。
• offText：OFF状态的文本。
• onSwitchColor：选中状态时switch元素的颜色。
• offSwitchColor：未选中状态时switch元素的颜色。
• onJackColor：选中状态时凸起圆形的颜色。
• offJackColor：未选中状态时凸起圆形的颜色。
• showText：在凸起圆形中是否显示文本。
• disabled：是否允许点击切换滑动按钮的状态。
• onInit：滑动按钮初始化结束后触发的事件。
• onChange：在原始的checkbox为checked状态时触发的回调函数。
• onRemove：当mySwitch.remove()时触发。
• onDestroy：当mySwitch.destroy()时触发。

API

switch.js滑动按钮插件的可用API如下：

• .on()：设置为ON状态。
• .off()：设置为OFF状态。
• .toggle()：切换滑动按钮的状态。
• .disable()：禁用滑动按钮。
• .enable()：启用滑动按钮。
• .destroy()：销毁滑动按钮，移除所有绑定的事件。
• .remove()：移除滑动按钮，显示原始的checkbox。
• ：

switch.js滑动按钮插件的github地址为：https://github.com/zhiyul/Switch。

在线预览    源码下载