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'
}
});
