当前位置：首页 > 网页特效 > 选择框

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

分类：选择框日期：2024-05-14 点击(5) 评论(0)

简介

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

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

```html
<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的组合。

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

```html
$('input[type=checkbox]').rcSwitcher();    
```         
#####  配置参数
```html
$('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属性。

```html
<input type="checkbox" name="" value="" data-ontext="YES" data-offtext="NO" /> 
```               
#####  事件
```html
$(':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'
    }
 
});
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果