jQuery中的Ajax加載器選項卡

Question

我的頁面中有一個Jquery UI選項卡。

我喜歡在更改選項卡時顯示類似於ajax loader的加載器。我指的是this question。但直到現在，我還沒有清楚如何做到這一點。

我在這樣的腳本中試過這個。

<script> 
$(function() { 
$("#tabs").tabs({ 

    ajaxOptions: { 

     error: function(xhr, status, index, anchor) { 
      $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?"); 
      var spinner = $(".selector").tabs("option", "spinner"); 
      $(".selector").tabs("option", "spinner", 'Retrieving data...'); 
     }, 
spinner: '<img src="http://i.stack.imgur.com/Pi5r5.gif" />' 


    } 
}); 
}); 
</script> 

如何使這容易的方式。 （我不喜歡在這裏使用AJAX方法。）

這樣的形象

Answer 1

一種解決方案可能是這樣的：

$("#tabs").tabs({ 
    beforeLoad: function(event, ui) { 
     ui.tab.html('<img src="http://i.stack.imgur.com/Pi5r5.gif" />'); 
    } 
}); 

只需重寫標籤的HTML內容與你的願望加載GIF。 Ajax調用完成後，標籤內容將被自動重寫。

的更多信息：http://api.jqueryui.com/tabs/#event-beforeLoad

Answer 2

我還沒有被設置AJAX尋找一種簡單的方法，並無意中發現了這個帖子。 Frans的回答幾乎是正確的，但更新了錯誤的元素。正確的版本應該是這樣的，他正在更新實際的選項卡而不是面板。

$("#tabs").tabs({ 
    beforeLoad: function(event, ui) { 
     ui.panel.html('<img src="http://i.stack.imgur.com/Pi5r5.gif" />'); 
    } 
}); 

我剛剛實施的效果很好。