Boostrap帶扭曲的Ajax選項卡

我正在努力獲得以下結果。一個用戶瀏覽標籤，但他沒有看到重新進入同一頁面時的加載效果（當然這是因爲默認值被加載器覆蓋了） - 但是我怎樣才能用一個加載器覆蓋.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/

來源

2016-06-11 Kavvson Empcraft

阿賈克斯自舉標籤後，更換內容，原創內容（裝載機）[聯繫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>'); 
    }

另外花哨的工作人員，我沒有發佈作爲一個問題是刷新瀏覽器後的活動選項卡的狀態保存。我強制點擊 - 因爲它是xhr內容，所以我猜想只有選項，並將其保存到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/

的完整代碼

來源

2016-06-11 20:17:15

Boostrap帶扭曲的Ajax選項卡

回答

相關問題