[EasyUI]$.messager变身Loadding效果
在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');
效果如下:
方法二:
使用 $.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组件实现,但是最终的展现效果有所不同。两个的样式都不太好看,如果要调整样式之类的,可能需要深度修改或定制;第二个是利用进度条的组件实现,所以有一个进度条;第三个是通过消息框的组件实现。
感谢分享,支持一下