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

当前位置:主页 > jQuery库 > 按钮和图标 > 可将radio按钮和checkbox转换为开关按钮的jQuery插件
可将radio按钮和checkbox转换为开关按钮的jQuery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:10-27
    阅读:
简要教程

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

<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=""分别相当于onTextoffText属性。

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

});