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

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

這篇文章主要介紹了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 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);
  }
}

基本調(diào)用：

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

自動關閉：

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

銷毀Loading Dom節(jié)點：

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,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

詳解jQuery uploadify文件上傳插件的使用方法
本文主要介紹了jQuery uploadify文件上傳插件的使用方法，uploadify這個插件是基于js里面的jquery庫寫的。結合了ajax和flash，實現(xiàn)了這個多線程上傳的功能。具有很好的參考價值，需要的朋友一起來看下吧
2016-12-12
jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能,涉及jQuery事件響應、元素遍歷及屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04
jquery.qtip提示信息插件用法簡單實例
這篇文章主要介紹了jquery.qtip提示信息插件用法,結合簡單實例形式分析了該插件用于顯示提示信息的相關使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
jquery ajax學習筆記2 使用XMLHttpRequest對象的responseXML
使用XMLHttpRequest對象的responseXML的方式來接受XML數(shù)據(jù)對象的DOM對象
2011-10-10
jQuery處理圖片加載失敗的常用方法
這篇文章主要介紹了jQuery處理圖片加載失敗的常用方法,實例演示了jQuery處理圖片加載失敗時提示加載失敗及隱藏加載失敗信息的方法,需要的朋友可以參考下
2015-06-06
基于jquery的下拉框改變動態(tài)添加和刪除表格實現(xiàn)代碼
以前很少用jquery，現(xiàn)在工作需要，用上了，感覺真的很方便！不用再像以前那樣寫那么多多余的Js了！看來得在jquery上花點功夫呢！
2011-03-03
jquery.blockUI.js上傳滾動等待效果實現(xiàn)思路及代碼
上傳滾動等待效果想必大家在很多場合都有見過吧，本文將介紹jquery.blockUI.js實現(xiàn)上傳滾動等待效果，感興趣的你可不要錯過了哈，希望可以幫助到你
2013-03-03
以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題
Promises是一種令代碼異步行為更加優(yōu)雅的抽象，它很有可能是JavaScript的下一個編程范式，一個Promise即表示任務結果，無論該任務是否完成。本文以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題，需要的朋友參考下
2015-11-11
Jquery瀑布流插件使用介紹
瀑布流布局在目前貌似很火爆，具體的分析、原理、用到的知識等等可以看看以下幾位牛人寫的東西
2012-10-10
JQuery 獲取多個select標簽option的text內(nèi)容(實例)
下面小編就為大家?guī)硪黄狫Query 獲取多個select標簽option的text內(nèi)容(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09