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

2025-06-11 06:53:19

修改开关的值

 .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开关的值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

原生JS实现 MUI导航栏透明渐变效果

mui内置有H5版本的透明渐变导航控件,教程参考mui官网:透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果: 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果,具体内容详情如下所示: 首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; positio
JavaScript Switch 声明

JavaScript中的条件声明用于完成基于不同条件的行为. JavaScript Switch 声明如果希望选择执行若干代码块中的一个,你可以使用switch声明: 语法: 复制代码代码如下: switch(n) { case 1: 执行代码块 1 break case 2: 执行代码块 2 break default: 如果n即不是1也不是2,则执行此代码 } 工作原理:switch后面的
mui js控制开关状态、修改switch开关的值方法

修改开关的值 .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; } <
js获取html的span标签的值方法(超简单)

HTML中代码为: <span id="testid">aaaa</span> 获取的js代码: 方法一:.innerText var x1 = document.getElementById("testid").innerText; alert("x1="+x1); 方法二:.innerHTML var x2 = document.getElementById("testid").innerHTML;
bootstrap switch开关组件使用方法详解

bootstrap中文网上有这么一个bootstrap-switch组件,很实用,看demo学习并记录一下. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=description content=""> <meta name=viewport content="width=device-width, initial-scale=1&q
JS 获取鼠标左右键的键值方法

function test() { alert(event.x+" "+event.y); alert(event.button); } /*右键菜单不显示*/ document.oncontextmenu=function() { return false; } /*document.onmousedown=function() { if(event.button==1) {alert("left")} if(event.button==2) {alert(&qu
微信小程序switch开关选择器使用详解

本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-list-box"> <view class="tui-menu-list"> <text>状态:{{isChecked1}}</text> <switch class="tui-fr" checked="{{isChecked1}}" b
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题

最近开发一个基于mui框架的一个微信小程序,发现在使用mui框架中的switch开关的时候,想要达到联动的功能,让一个主开关控制几个子开关,发现虽然开关的颜色变了,但是开关上的小圆点不动,对于刚入mui框架的新手,觉得一脸的懵逼,经过多方查找,然后自己动手,解决了这个问题,就想在此分享一下. 页面上 <div class="mui-switch mui-active"> <div class="mui-switch-handle"></
LayUI switch 开关监听获取属性值、更改状态的方法

背景今天在设计页面时,想使用一下 LayUI 的 switch 控件,在需要更改状态的时候进行 ajax请求传输需要获取其中的自定义属性值,同时根据服务器返回数据进行状态的更改通过参考文档及网友的经验,在此整理一番使用方法场景: 后台商品列表页,进行上下架状态的修改 ①. html 代码参考着重注意我设置的两个属性值 lay-filter,switch_goods_id <input type="checkbox" class="switch_checke
layui switch 开关监听弹出确定状态转换的例子

不废话,直接上图: 原始状态: 点击确定: 点击取消或者X 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/layui/css/layui.css"
vue.js封装switch开关组件的操作

我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定 <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="t
iview table render集成switch开关的实例

今天想要分享的是iview table render集成switch开关修改table表格的值,看文档记得看2.0的,不注意打开就成1.0然后用上了一直没有效果又没有找出原因.给出的只是一种写法思路,具体自己集成. 一.效果如下即是打开处理switch开关,对应修改为已处理状态,关闭switch开关,修改为未处理状态. 二.template html写法 <span style="font-size:14px;"><Table highlight-row borde

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

相关推荐

随机推荐