3

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

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

我已经在我的脚本中这样尝试过。

 <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 方法。）

喜欢这张图片 在此处输入图像描述

4

2 回答 2

5

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

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

我刚刚实施效果很好。

于 2013-08-09T21:15:53.193 回答
0

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

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

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

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

于 2013-04-02T12:19:44.660 回答