jQuery switchery 类似IOS的开关按钮使用

samool

2019 年 12 月 14 日

5746 次浏览

暂无评论

1044字数

享生活

如何调用switchery开关按钮
-----------------

1.导入switchery.css文件

2.导入switchery.js文件

3.html代码

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();