微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

程序名称:rcSwitcher

授权协议: GPLv3

操作系统: 跨平台

开发语言: JavaScript

rcSwitcher 介绍

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

});

rcSwitcher 官网

https://github.com/ahmad-sa3d/rcswitcher

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐