JQuery+Bootstrap如何自定義全屏Loading插件

這篇文章主要為大家展示了“JQuery+Bootstrap如何自定義全屏Loading插件”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JQuery+Bootstrap如何自定義全屏Loading插件”這篇文章吧。

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 ><div class="progress progress-striped active" ><div class="progress-bar" ></div></div><h6>@@KZ_Loading_Text@@</h6></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 >
  　　　　<div class="progress progress-striped active" >
  　　　　　　<div class="progress-bar" ></div>
  　　　　</div>
  　　　　<h6 id="loadText">loading...</h6>
  　　</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插件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！