[EasyUI]$.messager变身Loadding效果

Karry Bai 2020-12-30 AM 159℃ 1条

在EasyUI中,要想使用loadding效果,可能大部分都是使用div来控制是否显示来实现的。

//弹出Loadding状态层
function load() {
    $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
    $("<div class=\"datagrid-mask-msg\"></div>").html("数据加载中,请稍候……").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}

//取消Loadding状态层
function disLoad() {
    $(".datagrid-mask").remove();
    $(".datagrid-mask-msg").remove();
}

原本也想使用这种方式来做,但是使用起来并不是太友好。于是,便想办法直接通过原生的EasyUI的组件来实现。
方法一:
使用 $.messager.progress() 来实现,具体实现代码如下:

// 弹出Loadding状态层
$.messager.progress({
    title: '提示',
    msg: '数据加载中,请稍候……',
    text: ''
});

//取消Loadding状态层
$.messager.progress('close');

效果如下:
EasyUI progress效果

方法二:
使用 $.messager.progress() 来实现,具体实现代码如下:

// 弹出Loadding状态层
var _dlg = $.messager.show({
    title:'',
    msg:'执行中……',
    timeout:0,
    modal:true,
    showType:'null',
    style:{
        right: 'center',
        top: 'center',
        bottom: 'center'
    }
});

//取消Loadding状态层
_dlg.window('close');

效果如下:
EasyUI show效果

总结:
第一种总体代码不太友好,但是优点是样式完全自主设计。
第二种和第三种都是使用原生的EasyUI组件实现,但是最终的展现效果有所不同。两个的样式都不太好看,如果要调整样式之类的,可能需要深度修改或定制;第二个是利用进度条的组件实现,所以有一个进度条;第三个是通过消息框的组件实现。

非特殊说明,本博所有文章均为博主原创。

评论啦~



唉呀 ~ 仅有一条评论


  1. 北京监控安装
    北京监控安装

    感谢分享,支持一下

    回复 2021-02-27 19:54