JQuery UI選項卡 - 「正在加載...」消息

Question

全部，

我正在使用Jquery UI嵌套選項卡。我只是想知道是否有任何方式顯示一個AJAX微調圖像旁邊的標籤文本，而標籤加載。我不想將標籤文本更改爲「加載..」。考慮到當多個選項卡同時加載或一個接一個加載時，微調器圖像應顯示在每個加載選項卡旁邊。

任何建議？

謝謝

Answer 1

巴魯，我最近需要類似的東西。在我的項目中，我希望標籤保留標籤標題，但附加一個ajax加載類型的動畫。這裏是我使用的：

$(".tabs").tabs({ spinner: '', 
       select: function(event, ui) { 
        $(".tabs li a .loader").remove(); 
        $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
        }, 
       load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); } 
       }); 

「微調」選項刪除「加載...」效果點擊標籤。 「選擇」事件允許我們獲取選定的選項卡並追加一個包含動畫的新跨度。內容加載完成後，我們使用「加載」事件刪除動畫。爲了防止多個用戶點擊銷燬標籤，我們刪除（）所有選項卡上的動畫。

你已經解決了這個問題嗎？如果是這樣，請分享解決方案。

Answer 2

我自己對此使用了不同的方法。我希望標籤標題保持原樣，並在標籤本身中加載「加載」信息。

我做了如下的方式：

$("#matchTabs").tabs({ 
     spinner: "", 
     select: function(event, ui) { 
     var tabID = "#ui-tabs-" + (ui.index + 1); 
     $(tabID).html("<b>Fetching Data.... Please wait....</b>"); 
     } 
    }); 

像以前的海報，我用離心方法，以防止標籤的標題被改變。 select事件在選擇新選項卡時觸發，因此我得到了當前選定選項卡的ID並添加了一個以創建一個變量，該變量將引用缺省情況下加載ajax內容的DIV。

一旦你有了ID，你所需要做的就是用你的加載信息替換DIV中的HTML。當Ajax完成時，它會用實際內容替換它。

Answer 3

如果你使用標籤緩存，那麼這個解決方案可能更適合，如果內容不在頁面上，它只顯示ajax加載。

$(".tabs").tabs({ 
    cache:true, 
    load: function (e, ui) { 
    $(ui.panel).find(".tab-loading").remove(); 
    }, 
    select: function (e, ui) { 
    var $panel = $(ui.panel); 

    if ($panel.is(":empty")) { 
     $panel.append("<div class='tab-loading'>Loading...</div>") 
    } 
    } 
}) 

Answer 4

在jQuery UI的V1.12可以使用beforeLoad處理程序：

$('#tabs').tabs({     
beforeLoad: function(event, ui) { 
    ui.panel.html('Loading') 
} 
});