项目后台有个导入表格功能,数据量大所以想有个提示(文字版)且界面定住无法操作知道加载成功
layui的加载层一共有四种样式:
默认效果--风格2-风格3-风格4-打酱油 参与链接:https://layer.layui.com/
<script>
//加载层-默认风格
layer.load();
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加载层-风格2
layer.load(1);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加载层-风格3
layer.load(2);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加载层-风格4
layer.msg('加载中', {
icon: 16
,shade: 0.01
});
//打酱油
layer.msg('尼玛,打个酱油', {icon: 4});
</script>
在文件上传的地方,使用加载层
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//普通上传
var uploadInst = upload.render({
elem: '#test1'
,url: '{SITE_URL}man.php?s=students&c=home&m=eimport_formal'//换成自己的路径
,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
//加载层第3种风格
layer.load(2, {
shade: [0.8,'#000'],
shadeClose : false
}); //上传loading
//加载层第3种风格
layer.msg('正在处理请稍后', {
icon: 16
,shade: [0.3,'#fff']
,time:flase
//在后面执行的方法中,发现加载层消失后有一段时间间隔。故用到了time这个参数
});
}
,accept: 'file' //普通文件
,exts: 'xls|xlsx' //文件类型
,done: function(res) {
layer.closeAll('loading'); //关闭loading
}
,error: function(){
layer.closeAll('loading'); //关闭loading
}
});
});
</script>
因为是子框架用到了layer的加载层,但是还是父级也要盖住。故用到了以下几个参数:
parent.layer.load:在父级进行弹出
parent.layer.close(index):关闭父级弹窗
layer.closeAll(type) - 关闭所有层
具体可以参考:http://www.xiaoshu168.com/jquery/148.html
layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层