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。