JQuery+Bootstrap 自定义全屏Loading插件的示例demo

前端  /  管理员 发布于 5年前   621

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 = '
@@KZ_Loading_Text@@
';    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遮罩层--%>
  　　
  　　　　
  　　　　　　
  　　　　  　　　　
loading...
  　　<%--loading方法--%>

总结

以上所述是小编给大家介绍的JQuery+Bootstrap 自定义全屏Loading插件的示例demo,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• bootstrap可编辑下拉框jquery.editable-select
• bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
• Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
• bootstrap+jQuery实现的动态进度条功能示例
• vue中如何引入jQuery和Bootstrap
• Bootstrap jquery.twbsPagination.js动态页码分页实例代码
• jQuery简单实现提交数据出现loading进度条的方法
• jquery显示loading图片直到网页加载完成的方法
• 基于jquery的loading 加载提示效果实现代码
• 基于jquery的loading效果实现代码