mui怎么使用php,mui的加载按钮的使用

Hello MUI

input,

button,

.mui-btn {

margin: 5px 15px 10px 5px;

}

.mui-spinner {

display: inline-block;

width: 24px;

height: 24px;

-webkit-transform-origin: 50%;

transform-origin: 50%;

-webkit-animation: spinner-spin 1s step-end infinite;

animation: spinner-spin 1s step-end infinite;

}

.mui-spinner:after {

display: block;

content: "";

width: 100%;

height: 100%;

background-position: 50%;

background-size: 100%;

background-repeat: no-repeat;

}

.mui-spinner-custom:after {

background-image: url("data:image/svg+xml;charset=utf-8,");

}

加载中按钮插件

当用户点击按钮后，需要向服务端提交数据或等待服务端响应时，

常常需要提示“正在提交”，并将按钮设置为disabled，避免用户重复点击、重复提交；

mui的加载中按钮就实现了类似效果，点击如下按钮体验：

左侧loading图标：

确认

右侧loading图标：

确认

无loading图标：

确认

自定义loading图标：

确认

其他button效果

确认

确认

确认 2

确认

// 前提 mui的js的版本必须在v3.4或者高于v3.4

mui.init({

swipeBack: true //启用右滑关闭功能

});

mui(document.body).on('tap', '.mui-btn', function(e) {

mui(this).button('loading');

setTimeout(function() {

mui(this).button('reset');

}.bind(this), 2000);

});