快捷導(dǎo)航

JQuery+Bootstrap 自定義全屏Loading插件的示例demo

更新時(shí)間：2019年07月03日 10:24:58 作者：小心哈

這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

JQuery+Bootstrap 自定義全屏Loading插件

/**
 * 自定義Loading插件
 * @param {Object} config
 * {
 * content[加載顯示文本],
 * time[自動(dòng)關(guān)閉等待時(shí)間(ms)]
 * } 
 * @param {String} config 
 * 加載顯示文本
 * @refer 依賴 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上
 * @return {KZ_Loading} 對(duì)象實(shí)例
 */
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('對(duì)象已銷毀！');
        };
        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);
  }
}

基本調(diào)用：

var loading = new KZ_Loading('數(shù)據(jù)加載中。。。');
setTimeout(function () {
  console.log('加載完成!');
  loading.hide();
}, 1000);

自動(dòng)關(guān)閉：

var loading = new KZ_Loading({
  content: '數(shù)據(jù)加載中。。。',
  time: 2000
});
loading.show();

銷毀Loading Dom節(jié)點(diǎn)：

loading.destroy();

ps：下面看下基于JQUERY BOOTSTRAP 最簡(jiǎn)單的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;//默認(rèn)遮罩時(shí)間
  showLoading = function (loadText) {
    if(!loadText){
      $("#loadText").html(loadText)
    }
    $('#loadingModal').modal({backdrop: 'static', keyboard: false});
  }
  hideLoading = function () {
    $('#loadingModal').modal('hide');
  }
</script>

總結(jié)

以上所述是小編給大家介紹的JQuery+Bootstrap 自定義全屏Loading插件的示例demo,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: