MDUI
首页
注册

基于mdui的对话框写了一个简单的等待界面

lijialong1313
2022-08-24 16:29:14

完整代码如下:

var loadingDialog = null;
    var loadingDialogisOpen = false;

    function showLoading() {
        if (loadingDialogisOpen) {
            return true;
        } else {
            loadingDialogisOpen = true;
            loadingDialog = mdui.dialog({
                title: '请稍候',
                content: '<div class="mdui-col-xs-12 mdui-center mdui-text-center"><div class="mdui-spinner mdui-spinner-colorful"></div></div>',
                history: false,
                modal: true,
                closeOnEsc: false,
                onOpened: function () {
                    mdui.updateSpinners();
                },
                buttons: [
                    {
                        text: '强制关闭',
                        bold: true,
                        close: false,
                        onClick: function () {
                            hideLoading();
                        }
                    }
                ]
            });
        }
        return false;
    }

    function hideLoading() {
        if (loadingDialog) {
            if (loadingDialog.getState() === 'opened' || loadingDialog.getState() === 'opening') {
                loadingDialog.close();
                loadingDialogisOpen = false;
                return true;
            } else if (loadingDialog.getState() === 'closing' || loadingDialog.getState() === 'closed') {
                loadingDialogisOpen = false;
                return false;
            }
        }
        return false;
    }


作用是可以弹出一个等待界面,然后可以后台执行ajax操作等。主要可以自动加锁

使用方式:

                if(showLoading())
                {
                    mdui.alert("正在执行操作,请稍后再试")
                    return false;
                }
                $$.ajax({
                    method: 'POST',
                    url: '#',
                    success: function (data) {
                        var data = JSON.parse(data);
                        if (data.success) {
                            mdui.snackbar(data.message);
                        } else {
                            mdui.alert(data.message);
                        }
                    },
                    complete: function () {
                        hideLoading()
                    }
                });


实际效果(传不上来):


逻辑:

showLoading()时,如果是true,代表等待界面已经打开,所以说明程序正在运行。

然后hideLoading()会关闭对话框,并且把标记复位,可以用到完成操作之后关闭对话框。

(反正很简单就是了