您的位置：首页 > 产品设计 > UI/UE

008_跨平台开发_MUI_按钮之加载中按钮（button）

2017-10-28 10:08 281 查看

认识

mui v3.4 版新增加载中按钮样式,目前提供通过 JS API 切换 loading和reset状态,可以灵活操作适应多种场景。



属性

加载中按钮支持修改 loading状态的文案、显示的icon、icon的位置,如下:

属性作用
data-loading-textloading 状态显示的文案,默认为: loading
data-loading-iconloading 状态显示的icon,默认为mui-spinner或mui-spinner mui-spinner-white（根据按钮样式自动识别），为空表示不使用icon
data-loading-icon-positionloading 状态显示的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) {

4000
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




​

欢迎加入交流群：451826376

更多信息：www.itcourse.top

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航