开关事件

MUI HTML5

MUI

开关事件

mui提供了开关控件样式,点击滑动两种手势都可以对开关控件进行操作,在开关控件进行切换时,会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件,在开关切换时执行特定业务逻辑。如下为使用示例:

document.getElementById("mySwitch").addEventListener("toggle",function(event){
  if(event.detail.isActive){
    console.log("你启动了开关");
  }else{
    console.log("你关闭了开关");  
  }
})

若要获得当前开关状态,可通过判断当前开关控件是否包含.mui-active类来实现,若包含,则为打开状态,否则即为关闭状态;如下为代码示例:

var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive){
  console.log("打开状态");
}else{
  console.log("关闭状态");  
}

若使用js打开、关闭开关控件,可使用switch插件的toggle()方法,如下为示例代码:

mui("#mySwitch").switch().toggle();  //根据当前开关的状态,切换状态。