JQuery+Bootstrap 自定义全屏Loading插件
/** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param {String} config * 加载显示文本 * @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上 * @return {KZ_Loading} 对象实例 */ function KZ_Loading(config) { if (this instanceof KZ_Loading) { const domTemplate = '<div data-kzid="@@KZ_Loadin_ID@@" backdrop="static" keyboard="false"><div><div><div></div></div><h5>@@KZ_Loading_Text@@</h5></div></div>'; this.config = { content: 'loading...', time: 0, }; if (config != null) { if (typeof config === 'string') { this.config = Object.assign(this.config, { content: config }); } else if (typeof config === 'object') { this.config = Object.assign(this.config, config); } } this.id = new Date().getTime().toString(); this.state = 'hide'; /*显示 */ this.show = function () { $('.kz-loading[data-kzid=' + this.id + ']').modal({ backdrop: 'static', keyboard: false }); this.state = 'show'; if (this.config.time > 0) { var that = this; setTimeout(function () { that.hide(); }, this.config.time); } }; /*隐藏 */ this.hide = function (callback) { $('.kz-loading[data-kzid=' + this.id + ']').modal('hide'); this.state = 'hide'; if (callback) { callback(); } }; /*销毁dom */ this.destroy = function () { var that = this; this.hide(function () { var node = $('.kz-loading[data-kzid=' + that.id + ']'); node.next().remove(); node.remove(); that.show = function () { throw new Error('对象已销毁！'); }; that.hide = function () {}; that.destroy = function () {}; }); } var domHtml = domTemplate.replace('@@KZ_Loadin_ID@@', this.id).replace('@@KZ_Loading_Text@@', this.config.content); $('body').append(domHtml); } else { return new KZ_Loading(config); } }
基本调用：
var loading = new KZ_Loading('数据加载中。。。'); setTimeout(function () { console.log('加载完成!'); loading.hide(); }, 1000);
自动关闭：
var loading = new KZ_Loading({ content: '数据加载中。。。', time: 2000 }); loading.show();
销毁Loading Dom节点：
loading.destroy();
ps：下面看下基于JQUERY BOOTSTRAP 最简单的loading遮罩层
<%--loading遮罩层--%> <div backdrop="static" keyboard="false"> <div> <div> <div></div> </div> <h5>loading...</h5> </div> </div> <%--loading方法--%> <script type="text/javascript"> var loadingTime= 5;//默认遮罩时间 showLoading = function (loadText) { if(!loadText){ $("#loadText").html(loadText) } $('#loadingModal').modal({backdrop: 'static', keyboard: false}); } hideLoading = function () { $('#loadingModal').modal('hide'); } </script>
总结
以上所述是小编给大家介绍的JQuery+Bootstrap 自定义全屏Loading插件的示例demo,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: