switchery使用

关于学习switchery，可前往：http://abpetkov.github.io/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

---

下列为switchery的常用的方法：

1.设置switchery的禁用、可用样式

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

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

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

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

//禁用
switchery.disable();

//可用
switchery.enable();