rcswitcher是一款可以将原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的jQuery插件。它内置了light，dark,flat和modern四种主题，你只需要在参数中进行简单的控制，就可以生成非常漂亮的滑动开关按钮。它的特点还有：

  • 不需要指定多余和额外的HTML代码
  • 通过CSS3平滑过渡动画
  • 支持rtl
  • 支持checkbox类型数组，例如：<input name="delete_users[]">
  • 内置多种主题
  • 可以管理滑动开关按钮的样式
    • 可以控制滑动开关按钮的宽度和高度
    • 可以控制滑动开关按钮的滑块的偏移
    • 可以控制滑动开关按钮的开关方向
    • 可以控制滑动开关按钮的打开状态文字和关闭状态文字
    • 能够自动适配字体大小
    • 能够自动将滑动开关按钮放置在其父元素中

使用方法

该滑动开关按钮插件需要浏览器支持CSS3 transition属性和transform属性，jQuery版本要求大于1.7.0。

使用该滑动开关按钮插件需要引入jQuery(版本>1.7+)，rcswitcher.min.js和rcswitcher.min.css文件。

<link href='dist/rcswitcher.min.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="dist/rcswitcher.min.js"></script>
HTML结构

该l滑动开关按钮插件的HTML结构使用label和input的组合。

<label >level 1 </label><input type="radio" name="level" value="level1" >
<label >Access CP</label><input type="checkbox" name="access_cp" value="access_cp">
初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该滑动开关按钮插件。

$('input[type=checkbox]').rcSwitcher();

配置参数

$('input[type=checkbox]').rcSwitcher({
                            // 默认值            // 描述

    theme: 'flat',          // light            滑动开关按钮的主题：'flat, light, dark, modern'    
    width: 80,              // 56  in 'px'          
    height: 26,             // 22
    blobOffset: 0,          // 2
    reverse: true,          // false            颠倒开关顺序
    onText: 'YES',          // 'ON'             ON状态时的文本
    offText: 'NO',          // 'OFF'            OFF状态时的文本
    inputs: true,           // false            显示相应的inputs
    autoFontSize: true,     // false            根据滑动开关按钮的高度自动调整字体大小
    autoStick: true         // false            自动放置在父元素中
});

配置参数也可以作为data属性写在HTML标签中。例如：data-ontext=""和data-offtext=""分别相当于onText和offText属性。

<input type="checkbox" name="" value="" data-ontext="YES" data-offtext="NO" />

事件

$(':radio').rcSwitcher().on({

    'turnon.rcSwitcher': function( e, dataObj ){

        // to do on turning on a switch

        // dataObj.$input               current input jq object
        // dataObj.$switcher            current switch jq object
        // dataObj.components.$toggler  swich toggler jq object
        // dataObj.components.$on       switch on jq object
        // dataObj.components.$off      switch off jq object
        // dataObj.components.$blob     switch blob jq object

    },

    'turnoff.rcSwitcher': function( e, dataObj ){

        // to do on turning off a switch
    },

    'change.rcSwitcher': function( e, dataObj, changeType ){

        // to do on turning on or off a switch
        // changeType is 'turnon' || 'turnoff'
    }

});