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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
小型js框架veryide.librar源代码
Mar 05 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
JS实现时间校验的代码
May 25 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
生成静态页面的PHP类
2006/11/25 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
javascript比较文档位置
2008/04/08 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
Python MD5文件生成码
2009/01/12 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python库安装速度过慢解决方案
2020/07/14 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
物业工作计划书
2014/01/10 职场文书
中秋节活动总结
2014/08/29 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2014年文明创建工作总结
2014/11/25 职场文书