jquery Tabs中的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

我也在寻找一种没有ajax设置的简单方法，并且偶然发现了这篇文章。 Frans的答案几乎是正确的，但更新了错误的元素。修正后的版本应如下所示，他正在更新实际标签，而不是面板。

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

我刚刚实施了很好的作品。

Answer 2

一种解决方案可能是这样的：

$("#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