认识
- mui v3.4 版新增加载中按钮样式,目前提供通过 JS API 切换 loading和reset状态,可以灵活操作适应多种场景。
属性
- 加载中按钮支持修改 loading状态的文案、显示的icon、icon的位置,如下:
属性 | 作用 |
---|---|
data-loading-text | loading 状态显示的文案,默认为: loading |
data-loading-icon | loading 状态显示的icon,默认为mui-spinner或mui-spinner mui-spinner-white(根据按钮样式自动识别),为空表示不使用icon |
data-loading-icon-position | loading 状态显示的icon的位置,支持left/right默认left |
<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">确认</button>
<button type="button" data-loading-text="提交中" class="mui-btn">确认</button>
JS API
mui(btnElem).button(‘loading’);//切换为loading状态
mui(btnElem).button(‘reset’);//切换为reset状态(即重置为原始的button)
/*
* on(events: EventString, selector: String, handler: Function(mui.Event)):
* muimui批量元素的事件绑定
*/
mui(document.body).on("tap",".mui-btn",function(e) {
mui(this).button("loading");
/*
* setTimeout(func: Function, delay: Number, args: Object): Number
*/
setTimeout(function() {
mui(this).button("reset");
/*
* fun.bind(thisArg[, arg1[, arg2[, ...]]])
* :参数
* thisArg
* 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当
* 使用new 操作符调用绑定函数时,该参数无效。
* arg1, arg2, ...
* 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
* 返回值
* 返回由指定的this值和初始化参数改造的原函数拷贝
*/
}.bind(this),500)
})
})
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
mui.ready(function() {
/*
* on(events: EventString, selector: String, handler: Function(mui.Event)):
* muimui批量元素的事件绑定
*/
mui(document.body).on("tap",".mui-btn",function(e) {
mui(this).button("loading");
/*
* setTimeout(func: Function, delay: Number, args: Object): Number
*/
setTimeout(function() {
mui(this).button("reset");
/*
* fun.bind(thisArg[, arg1[, arg2[, ...]]])
* :参数
* thisArg
* 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当
* 使用new 操作符调用绑定函数时,该参数无效。
* arg1, arg2, ...
* 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
* 返回值
* 返回由指定的this值和初始化参数改造的原函数拷贝
*/
}.bind(this),500)
})
})
</script>
<style type="text/css">
.styleBtn {
margin-top: 20px;
/*让按钮居中*/
text-align: center;
}
/* 自定义样式 */
.mui-button-diy {
/*背景色*/
background-color: #EC971F;
/*字体颜色*/
color: #8A6DE9;
}
</style>
</head>
<!--
1.属性
data-loading-text loading 状态显示的文案,默认为: loading
data-loading-icon loading 状态显示的icon,默认为mui-spinner或
mui-spinner mui-spinner-white(根据按钮样式自动识别),
为空表示不使用icon
data-loading-icon-position loading 状态显示的icon的位置,支持left/right默认left
2.js API
mui(btnElem).button('loading');//切换为loading状态
mui(btnElem).button('reset');//切换为reset状态(即重置为原始的button)
-->
<!--
步骤:
1.新建不同按钮
2.为普通按钮增加属性
3.通过js进行控制
-->
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">加载中按钮(button)</h1>
</header>
<div class="mui-content">
<div class="one styleBtn">
<!-- 第一个按钮 -->
<button type="button" data-loading-icon='mui-spinner'
data-loading-text='加载中……' class="mui-btn mui-btn-yellow">进入</button>
<!-- 第二个按钮 -->
<button type="button" data-loading-icon='mui-spinner mui-spinner-white'
data-loading-text='退出中……' data-loading-icon-position='right'
class="mui-btn mui-btn-green">退出</button>
</div>
</div>
</body>
</html>
效果
源码下载
关注下方的微信公众号,回复:008_按钮之加载中按钮(button).code