為NProgress增加模態層，更完美的應用於複雜網頁的細長進度條

沉默王二發表於2016-08-01
網頁
版權宣告：歡迎轉載，請註明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/52083995

NProgress是一款在網頁頂部新增細長進度條的工具，非常輕巧，使用起來也非常便捷，靈感來源於Google, YouTube。我是在用github時發現這一特性的，就想應用到我的網站上，經過層層篩選找到了NProgress，感覺非常棒，另外我又為NProgress新增了模態層，因為我不希望一個請求響應未結束前，當前頁面再去請求服務。

一、元件下載

官網http://ricostacruz.com/nprogress/

也可以看到演示效果，我就不再貼我網站的效果圖了，就是多了一層模態。

二、應用

1、匯入元件

<link type="text/css" rel="stylesheet" href="${ctx}/components/nprogress/nprogress.css" />
<script type="text/javascript" src="${ctx}/components/nprogress/nprogress.js"></script>

2、使用元件

// 配置
NProgress.configure({
    // 不顯示轉動的小圓圈
    showSpinner : false
});

// 將模態層新增到body中
var ajaxbg = $(`<div id="background" class="background"></div>`).appendTo("body");
ajaxbg.hide();

// 頁面繫結ajaxStart、ajaxStop方法
$(document).ajaxStart(function() {
    // 啟動
    NProgress.start();

    // 如果存在模態框ajax，則將背景層新增到當前模態框上
    if ($("#pop_ajax_dialog").length > 0) {
        $("#pop_ajax_dialog").append(ajaxbg);
    } else {
        $("body").append(ajaxbg);
    }
    // 模態層
    ajaxbg.show();
}).ajaxStop(function() {
    // 結束、隱藏模態層
    NProgress.done();
    ajaxbg.hide();
});
  1. 我的專案中有模態框，所以彈出模態框的上面應用模態層的話，就將模態層置於彈出模態框的上面，而不再是body上。
  2. ajaxStart、ajaxStop 兩個方法就可以實現請求的進度條的開始和結束。

模態層的樣式

.background { display:block; width:100%; height:100%; opacity:0.4; filter:alpha(opacity=40); background:#FFF; position:absolute; top:0; left:0; z-index:2000;}

使用起來非常簡單，最關鍵的在於找到合理的方案，而這篇博文就可以為你提供解決方案。


相關文章