啓用緩存的微調消息

Question

我正在使用jQuery 1.6.2和jQuery UI。我想在選項卡AJAX加載中顯示自定義消息。我有兩個選項卡（如official documentation），我喜歡在正在加載的HTML div內顯示「微調器」消息，而不是在標籤標題附近。

以下代碼的問題是我啓用了緩存，因此無法按預期工作。

$jQ(function() { 
    $jQ('tabs').tabs({ 
    cache: true, 
    select: function(event, ui) { 
     var currentId = ui.index + 1; 
     $jQ('#' + currentId).html('Loading tab content...'); 
    } 
    }); 
}); 

這裏是發生了什麼：

• 我第一次點擊第二個選項卡上的我沒有得到任何加載消息，但該選項卡的內容被加載。
• 第二次單擊第二個選項卡時，我得到加載消息並且沒有更多選項卡內容（即，選項卡內容未顯示，並且它仍保留在加載消息中）。

我該如何讓它工作？

Answer 1

首先，您的ajax可能會加載得太快，以至於您沒有看到加載消息。其次，您可以添加一個檢查來查看頁面是否已經加載，如果已經加載，則不要更改爲加載消息。

$(function() { 
    var cached = {}; 
    ("#tabs").tabs({ 
     cache : true, 
     select: function(event, ui) { 
     if (typeof ui.index === "undefined") { 
      $(ui.panel).html('Loading tab content...'); 
      cached[ui.index] = true; 
     } 
     } 
    }); 
});