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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php连接mysql数据库代码
2009/03/10 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
实例解析Array和String方法
2016/12/14 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python中List的sort方法指南
2014/09/01 Python
跟老齐学Python之类的细节
2014/10/13 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
python爬取新闻门户网站的示例
2021/04/25 Python
MySQL开启事务的方式
2021/06/26 MySQL