前端开关switchery使用

Switchery是一个简单的组件,它可以帮助你把你的默认的HTML复选框输入美丽的iOS 7样式开关仅在几个简单的步骤。您可以轻松地定制开关,以便他们完美地匹配您的设计。

switchery官网介绍:http://abpetkov.github.io/switchery/

引入前端文件

<script type="text/javascript" src="/bundles/jquery/js/jQuery-2.2.0.min.js"></script>
<script type="text/javascript" src="/bundles/switchery/js/switchery.js"></script>
<link rel="stylesheet" href="/bundles/switchery/css/switchery.css" />

前端html结构示例

<form class="form-horizontal">
	<div class="form-group ">
		<label for="picbg" class="control-label" id="show_bg">显示背景图片:</label>          
		<div class="switch"> 
			<input type="checkbox" class="js-switch form-control" checked="" id="picbg" name="picbg">
		</div>
	</div>
	<div class="form-group ">
		<label for="showtime" class="control-label" id="labeltime">显示时间:</label>          
		<div class="switch"> 
			<input type="checkbox" class="js-switch form-control" checked="" id="showtime" name="showtime">
		</div>
	</div>
</form>

初始化 switchery

var elem = document.querySelector('.js-switch');

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

多个开关批量设置

<script type="text/javascript">
elem.forEach(function(html) {
	var switchery = new Switchery(html, {size:"small", color:'#26a8eb', secondaryColor:"#e4e4e4"});
});
</script>

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

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

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