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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery属性选择器用法实例分析
Jun 28 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
javascript的BOM
2016/05/03 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
python生成器推导式用法简单示例
2019/10/08 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Python如何定义一个函数
2015/09/01 面试题
校长岗位职责
2013/11/26 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
党日活动总结
2014/05/07 职场文书
党员承诺书怎么写
2014/05/20 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
医学生自荐信范文
2015/03/05 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL