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 相关文章推荐
JQuery 弹出框定位实现方法
Dec 02 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
javascript实现图片轮播代码
Jul 09 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 身份证号验证函数
2009/05/07 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
PHP实现微信对账单处理
2018/10/01 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python网页请求urllib2模块简单封装代码
2014/02/07 Python
探究python中open函数的使用
2016/03/01 Python
python tkinter基本属性详解
2019/09/16 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python 复平面绘图实例
2019/11/21 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
春节联欢晚会主持词
2014/03/24 职场文书
元宵晚会主持词
2014/03/25 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
股东出资证明书范例
2014/10/04 职场文书
2014年网管工作总结
2014/12/11 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL