2016-06-11 68 views
0

我正在努力獲得以下結果。一個用戶瀏覽標籤,但他沒有看到重新進入同一頁面時的加載效果(當然這是因爲默認值被加載器覆蓋了) - 但是我怎樣才能用一個加載器覆蓋.load()DOM非活動標籤[簡化::離開標籤時清除內容]。Boostrap帶扭曲的Ajax選項卡

我的基本嘗試。從jax頁面重新進入時,第一個選項卡不起作用,但它不是在我的頁面上正常運行的情況。

TLDR - 離開活動標籤

簡單的jQuery

$('#myTabs a').click(function(e) { 
    e.preventDefault(); 
    $.ajaxSetup({ 
    'cache': true 
    }); 
    var url = $(this).attr("data-url"); 
    var href = this.hash; 
    var pane = $(this); 
    $(href).load(url, function(result) { 
    pane.tab('show'); 

    }); 
}); 

而且一個例子

https://jsfiddle.net/074rk3re/4/

回答

0

阿賈克斯自舉標籤後,更換內容,原創內容(裝載機)[聯繫LTE模板]帶狀態保存

好吧我想通了:)發佈以防萬一有人會需要它也很有用。如果需要,也請重建我的問題。

出發

我用這兩個變量,以保持點擊標籤,前一個標籤的軌道清除DOM與裝載機

var targetel = $(e.target).filter($(this).attr('href')); 
var prevel = $(e.relatedTarget).filter($(this).attr('href')); 

接下來,我增加了一個短的睡眠對於AJAX呼叫。 [Todo也許:在樹形時間快速設置標籤的時候,它們不會取消加載,後面會加載一個xhr請求,這有點毫無意義,您知道如何防止這種情況發生? ]

然後我添加了加載程序元素。由於第一次加載時沒有以前的元素,所以需要有一個條件。不知道它是一種適當的方式來上下文,但它的工作原理。

$(targ).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>'); 
    if (prevel.context) { 
    $(prevel.context.hash).html('<div class="overlay text-center"><i class="fa fa-refresh fa-spin fa-5x"></i></div>'); 
    } 

另外花哨的工作人員,我沒有發佈作爲一個問題是刷新瀏覽器後的活動選項卡的狀態保存。我強制點擊 - 因爲它是xh​​r內容,所以我猜想只有選項,並將其保存到localStorage。這種狀態保存將在您選擇一個選項卡後生效。默認情況下沒有選擇,如果你想擁有,所以你可以做這樣的事情

$('#myTabs > li > a[href="' + activeTab + '"]').trigger('click'); 

其中activeTab將是鏈接的ID在<li>

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) { 
    localStorage.setItem('activeTab', $(e.target).attr('href')); 
}); 
var activeTab = localStorage.getItem('activeTab'); 
if (activeTab) { 
    $('#myTabs > li > a[href="' + activeTab + '"]').trigger('click'); 
} 

就是這樣,如果您有任何建議,請寫信。

可以在這裏

https://jsfiddle.net/074rk3re/9/

的完整代碼