項目後臺有個導入表格功能,數據量大所以想有個提示(文字版)且界面定住無法操作知道加載成功
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層