添加加载图形jQuery的UI Ajax选项卡？ [英] Add Loading Graphic To JQuery UI Ajax Tabs?

问题描述

我如何添加一个加载图形的JQuery用户界面Ajax选项卡？因此，暂停半秒，显示图形，然后加载的内容？

How can I add a loading graphic to the JQuery UI ajax tabs? So it pauses for half a second, displays the graphic then loads the content?

这里的code，我有：

Here's the code I have:

<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?");
            }


        }
    });
});

这是我希望的情况下使用图形的类型，你不知道：

This is the type of graphic I want to use in case you aren't sure:

谢谢！

推荐答案

从UI的例子@ http://jqueryui.com/demos/tabs/#option-spinner

该字符串的HTML内容显示在一个分页标题，而远程加载内容。传入空字符串来取消该行为。一个跨度元素必须是present在标题的一个标记，用于微调的内容可见。

The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. An span element must be present in the A tag of the title, for the spinner content to be visible.

Get or set the spinner option, after init.

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

所以，你的code将是：

SO your code would be:

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


        }
    });
});

这篇关于添加加载图形jQuery的UI Ajax选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！