mui js控制开关状态、修改switch开关的值方法


Posted in Javascript onSeptember 03, 2019

修改开关的值

.mui-switch:before{
  font-size: 13px;
  position: absolute;
  top: 3px;
  right: 11px;
  content: attr(data-off);
  text-transform: uppercase;
  color: #999;
  }
  .mui-switch.mui-active:before{
  right: auto;
  left: 15px;
  content: attr(data-on);
  color: #fff;
  }



<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<span>报警消息设置</span>
<div class="mui-switch mui-active" id="mySwitch" data-off="关" data-on = "开">
<div class="mui-switch-handle"></div>
</div>
</li> 
</ul> 
</div>

控制开关状态:

document.getElementById("mySwitch").addEventListener("toggle",function(event){ 
if(event.detail.isActive){
  var btnArray = ['取消', '确认'];
mui.confirm('关闭报警推送消息后,系统将不再推送报警消息?', '警告!', btnArray, function(e) {
if(e.index==1){
console.log("你关闭了报警推送");
}else{
mui("#mySwitch").switch().toggle(); 
}
},'div') 
}else{
  
}
})

以上这篇mui js控制开关状态、修改switch开关的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
jqgrid 简单学习笔记
May 03 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
如何编写jquery插件
Mar 29 jQuery
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
Layui给switch添加响应事件的例子
Sep 03 #Javascript
layui--js控制switch的切换方法
Sep 03 #Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 #Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 #Javascript
vue路由教程之静态路由
Sep 03 #Javascript
You might like
windows7下php开发环境搭建图文教程
2015/01/06 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python 多线程应用介绍
2012/12/19 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Python可变参数用法实例分析
2017/04/02 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
python实现飞行棋游戏
2020/02/05 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python数据抓取3种方法总结
2021/02/07 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
个人委托书范本
2014/04/02 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
详解Vue的options
2021/05/15 Vue.js
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python