前端开关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();
