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

Posted 2023-05-08

【中文标题】将加载图形添加到 JQuery UI Ajax 选项卡？

【英文标题】：Add Loading Graphic To JQuery UI Ajax Tabs?

【发布时间】：2011-04-26 01:27:46

【问题描述】：

如何将加载图形添加到 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?");
            


        
    );
);

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

谢谢！

【参考方案1】：

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

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

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" />'


        
    );
);

【讨论】：

不完全是 - 微调器只适用于标签标签本身！这意味着图像将显示在标签标签中，并且只有在 标签中设置了 ！

我们设法做到了这一点，它在加载时显示，但在加载完成后它并没有隐藏，即使我们确认 ajax 加载已成功完成。有人知道为什么会这样吗？

您能否编辑您的问题以准确显示适合您的代码，然后在此处发表评论，我将更新我的答案，或相应地发表评论。最好是问一个新问题，然后你就可以让整个社区为你所用。