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


Posted in jQuery onJuly 03, 2019

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 class="modal fade kz-loading" data-kzid="@@KZ_Loadin_ID@@" 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>@@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 class="modal fade" id="loadingModal" 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 id="loadText">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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现增删改查
Dec 22 jQuery
jQuery属性选择器用法实例分析
Jun 28 #jQuery
jQuery位置选择器用法实例分析
Jun 28 #jQuery
jQuery层叠选择器用法实例分析
Jun 28 #jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 #jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
You might like
php使用curl存储cookie的示例
2014/03/31 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
快速入手Python字符编码
2016/08/03 Python
Django数据库表反向生成实例解析
2018/02/06 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python 字典操作提取key,value的方法
2019/06/26 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
初一地理教学反思
2014/01/16 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
导游词之镜泊湖
2019/12/09 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript