添加加载图形到JQuery UI Ajax选项卡？

Question

如何在JQuery UI ajax标签中添加加载图形？所以它暂停了半秒钟，显示图形然后加载内容？

这是我的代码：

<script type="text/javascript">
$(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?");
            }


        }
    });
});

这是我想要使用的图形类型，以防您不确定：

谢谢！

Answer 1

来自UI示例@ http://jqueryui.com/demos/tabs/#option-spinner

当加载远程内容时，此字符串的HTML内容显示在选项卡标题中。传入空字符串以停用该行为。 span元素必须存在于标题的A标记中，以使微调器内容可见。

Get or set the spinner option, after init.

    //getter
    var spinner = $( ".selector" ).tabs( "option", "spinner" );
    //setter
    $( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );

所以你的代码是：

$(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?");
            },
spinner: '<img src="http://i.stack.imgur.com/Pi5r5.gif" />'


        }
    });
});