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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现简单日历效果
Jul 05 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
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
详解Python中的文本处理
2015/04/11 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python3实现名片管理系统
2020/11/29 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Python短信轰炸的代码
2020/03/25 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
大学生学期自我鉴定
2014/03/19 职场文书
交通违章检讨书
2014/09/21 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA