可将radio按钮和checkbox转换为开关按钮的jQuery插件

开关按钮 滑动按钮 2015-10-27

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

支持IE10+

演示下载 1623
使用方法

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

使用方法

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

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

1
2
3
<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结构使用labelinput的组合。

1
2
<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元素加载完毕之后,可以通过下面的方法来初始化该滑动开关按钮插件。

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

配置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('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=""分别相当于onTextoffText属性。

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

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(':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'
    }
 
});

本文转载请注明出处:http://www.zhuiye.com/detail_14.html