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