rcSwitcher轉(zhuǎn)換單／復選框功能的插件

rcSwitcher (Radio Checkbox Switcher) 是一款能夠讓單選框和復選框轉(zhuǎn)換成開關(guān)的 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'
    }

});