switchery设置选中_前端开关switchery使用 - YangJunwei

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

引入前端文件

前端html结构示例

显示背景图片：

显示时间：

初始化 switchery

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

//size 设置禁用可用按钮的大小、secondaryColor：设置右边的颜色为红色

var switchery = new Switchery(elem, {size:"large",secondaryColor:"red"});

多个开关批量设置

elem.forEach(function(html) {

var switchery = new Switchery(html, {size:"small", color:'#26a8eb', secondaryColor:"#e4e4e4"});

});

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