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

联合创作 · 2023-10-02 17:12

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

});
浏览 1
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报