如何调用switchery开关按钮

1.导入switchery.css文件

<link rel="stylesheet" type="text/css" 
href="${pageContext.request.contextPath}/switchery/switchery.css">

2.导入switchery.js文件

<script type="text/javascript" src="${pageContext.request.contextPath }/switchery/switchery.js"></script>

3.html代码

<div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label" id="serIsCan">是否可用</label>
                    
    <div class="switch"> 
        <input type="checkbox" class="js-switch" checked="">
        <span id="enable_status"></span>
    </div>
</div>

4.初始化switchery

var elem = document.querySelector('.js-switch');
 
//size 设置禁用可用按钮的大小、secondaryColor：设置右边的颜色为红色
var switchery = new Switchery(elem,{size:"large",secondaryColor:"red"});

常见的其它使用方法

设置switchery的禁用、可用样式

/**
 * 设置“禁用/可用”的按钮样式
 * @param switchElement
 * @param checkedBool
 */
function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            switchElement.handleOnchange(true);
        }
    }

当“禁用/可用”按钮发生改变时,获取当前状态

elem.onchange = function() {
//获取按钮的选中状态
isChecked = elem.checked;                                
};

设置按钮的可用、禁用状态

//禁用
switchery.disable();
 
//可用
switchery.enable();

当前暂无评论 »