JQuery+Bootstrap 自定义全屏Loading插件

Posted 2022-03-08 xinxin-csharp

 1 /**
 2  * 自定义Loading插件
 3  * @param Object config
 4  * 
 5  * content[加载显示文本],
 6  * time[自动关闭等待时间(ms)]
 7  * 
 8  * @param String config
 9  * 加载显示文本
10  * @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上
11  * @return KZ_Loading 对象实例
12  */
13 function KZ_Loading(config) 
14     if (this instanceof KZ_Loading) 
15         const domTemplate = ‘<div class="modal fade kz-loading" data-kzid="@@[email protected]@" backdrop="static" keyboard="false"><div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px"><div class="progress progress-striped active" style="margin-bottom: 0;"><div class="progress-bar" style="width: 100%;"></div></div><h5>@@[email protected]@</h5></div></div>‘;
16         this.config = 
17             content: ‘loading...‘,
18             time: 0,
19         ;
20         if (config != null) 
21             if (typeof config === ‘string‘) 
22                 this.config = Object.assign(this.config, 
23                     content: config
24                 );
25              else if (typeof config === ‘object‘) 
26                 this.config = Object.assign(this.config, config);
27             
28         
29         this.id = new Date().getTime().toString();
30         /*显示 */
31         this.show = function() 
32             $(‘.kz-loading[data-kzid=‘ + this.id + ‘]‘).modal(
33                 backdrop: ‘static‘,
34                 keyboard: false
35             );
36             if (this.config.time > 0) 
37                 var that = this;
38                 setTimeout(function() 
39                     that.hide();
40                 , this.config.time);
41             
42         ;
43         /*隐藏 */
44         this.hide = function() 
45             $(‘.kz-loading[data-kzid=‘ + this.id + ‘]‘).modal(‘hide‘);
46         ;
47         /*销毁dom */
48         this.destroy = function() 
49             $(‘.kz-loading[data-kzid=‘ + this.id + ‘]‘).remove();
50             this.show = function() 
51                 throw new Error(‘对象已销毁！‘);
52             ;
53             this.hide = function() ;
54             this.destroy = function() ;
55         
56         var domhtml = domTemplate.replace(‘@@[email protected]@‘, this.id).replace(‘@@[email protected]@‘, this.config.content);
57         $(‘body‘).append(domHtml);
58      else 
59         return new KZ_Loading(config);
60     
61 

基本调用：

1 var loading = new KZ_Loading(‘数据加载中。。。‘);
2 setTimeout(function () 
3    console.log(‘加载完成!‘);
4    loading.hide();
5 , 1000);

自动关闭：

1 var loading = new KZ_Loading(
2     content: ‘数据加载中。。。‘,
3     time: 2000
4 );
5 loading.show();

销毁Loading Dom节点：

1 loading.destroy();