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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
json跟xml的对比分析
Jun 10 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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/10/09 PHP
php生成WAP页面
2006/10/09 PHP
如何隐藏你的.php文件
2007/01/04 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
原生js实现鼠标跟随效果
2017/02/28 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
餐饮加盟计划书
2014/01/10 职场文书
银行批评与自我批评
2014/02/10 职场文书
小学清明节活动总结
2014/07/04 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
初中体育课教学反思
2016/02/16 职场文书
js之ajax文件上传
2021/05/13 Javascript
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP