jquery 选项卡中的 Ajax 加载器答案

【问题标题】：Ajax loader in jquery Tabsjquery 选项卡中的 Ajax 加载器
【发布时间】：2013-04-01 05:35:43
【问题描述】：

我的页面中有一个 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="http://i.stack.imgur.com/Pi5r5.gif" />'


    }
});
});
</script>

如何以简单的方式做到这一点。（这里我不喜欢使用ajax方法。）

喜欢这张图片

【问题讨论】：

标签： jquery ajax jquery-ui tabs

【解决方案1】：

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

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

我刚刚实现的效果很好。

【讨论】：

【解决方案2】：

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

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

只需使用您想要的加载 gif 重写标签的 html 内容。 Ajax 调用完成后，tab 内容会自动重写。

【讨论】：