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中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 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
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
摘自启点的main.js
2008/04/20 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
子页向父页传值示例
2013/11/27 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python daemon守护进程实现
2016/08/27 Python
Python 装饰器使用详解
2017/07/29 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python列表与元组的异同详解
2019/07/02 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
python Xpath语法的使用
2020/11/26 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
教师队伍管理制度
2014/01/14 职场文书
工作过失检讨书
2014/02/23 职场文书
个人课题方案
2014/05/08 职场文书
新教师培训方案
2014/06/08 职场文书
授权委托书怎么写
2014/09/25 职场文书
先进个人材料怎么写
2014/12/30 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书