转换单/复选框功能的插件 rcSwitcher

GPLv3
JavaScript HTML/CSS
跨平台
2015-04-30
大胖森

rcSwitcher (Radio Checkbox Switcher) 是一款能够让单选框和复选框转换成开关的 jQuery 插件,它能让你的收音机看起来更加漂亮。

代码示例:

// convert all checkboxs to switchs
$('input[type=checkbox]').rcSwitcher();


// Options
$('input[type=checkbox]').rcSwitcher({
                            // Default value            // info

    theme: 'flat',          // light                    select theme between 'flat, light, dark, modern'    
    width: 80,              // 56  in 'px'          
    height: 26,             // 22
    blobOffset: 0,          // 2
    reverse: true,          // false                    reverse on off order
    onText: 'YES',          // 'ON'                     text displayed on ON state
    offText: 'NO',          // 'OFF'                    text displayed on OFF state
    inputs: true,           // false                    show corresponding  inputs
    autoFontSize: true,     // false                    auto fit text size with respect to switch height
    autoStick: true         // false                    auto stick switch to its parent side
});


// assign event handler
$(':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'
    }

});
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

Html5添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件教程

一、使用方法 <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...

2016/01/11 15:51
82
1

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部