jquery - jquery 选项卡中的 Ajax 加载器

Question

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

我喜欢在更改选项卡时显示类似于 ajax 加载器的加载器。我提到了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="/image/Pi5r5.gif" />'


    }
});
});
</script>

如何以简单的方式做到这一点。 (我不想在这里使用ajax方法。)

喜欢这张图片

Answer 1

我也在寻找一种无需 ajax 设置的更简单的方法，并偶然发现了这篇文章。弗兰斯的答案几乎是正确的，但更新了错误的元素。更正后的版本应该如下所示，他正在更新实际选项卡而不是面板。

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

我刚刚实现效果很好。