jquery Tabs中的Ajax加载器

Question

我的页面中有一个Jquery UI选项卡.

我喜欢在更改选项卡时显示类似于ajax loader的加载程序.我提到了这个问题.但到目前为止,我对如何做到这一点没有任何明确的想法.

我在我的脚本中尝试过这样的.

 <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" />');
  }
});

我刚刚实施了很好的工作.