微学网

热门关键词:   as  thinkphp  ecshop  xxx  php分页  商务通
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

JQuery+Bootstrap 自定义全屏Loading插件

发布时间:2020-03-11 来源:未知 点击:
 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         this.state = 'hide';
31 
32         /*显示 */
33         this.show = function () {
34             $('.kz-loading[data-kzid=' + this.id + ']').modal({
35                 backdrop: 'static',
36                 keyboard: false
37             });
38             this.state = 'show';
39             if (this.config.time > 0) {
40                 var that = this;
41                 setTimeout(function () {
42                     that.hide();
43                 }, this.config.time);
44             }
45         };
46         /*隐藏 */
47         this.hide = function (callback) {
48             $('.kz-loading[data-kzid=' + this.id + ']').modal('hide');
49             this.state = 'hide';
50             if (callback) {
51                 callback();
52             }
53         };
54         /*销毁dom */
55         this.destroy = function () {
56             var that = this;
57             this.hide(function () {
58                 var node = $('.kz-loading[data-kzid=' + that.id + ']');
59                 node.next().remove();
60                 node.remove();
61                 that.show = function () {
62                     throw new Error('对象已销毁!');
63                 };
64                 that.hide = function () {};
65                 that.destroy = function () {};
66             });
67         }
68 
69         var domHtml = domTemplate.replace('@@[email protected]@', this.id).replace('@@[email protected]@', this.config.content);
70         $('body').append(domHtml);
71     } else {
72         return new KZ_Loading(config);
73     }
74 }

这就是微学网-程序员之家为你提供的"JQuery+Bootstrap 自定义全屏Loading插件"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/9847.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 微信公众号 | 小程序 | 服务器 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版