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 06 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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的分页功能
2007/03/21 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
python实现批量修改文件名代码
2017/09/10 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
毕业生实习鉴定
2013/12/11 职场文书
企业诚信承诺书
2014/05/23 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
安全责任书
2015/01/29 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js