如何在 jquery ui 对话框中显示加载栏？答案

【问题标题】：How to show a loading bar inside jquery ui dialog?如何在 jquery ui 对话框中显示加载栏？
【发布时间】：2013-04-19 15:31:05
【问题描述】：

现在，我正在使用此功能从 jquery ui 对话框中的不同页面加载内容：

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.load(uri, function() {
        div.dialog({
            title: title,
            width: width,
            height: height,
            position: 'middle',
            resizable: false,
            buttons: buttonsArray
        });
    });
}

例如这样：

$('a.dictionary').click(function() {
    openDialogByUri($otherDialogContainer, '/test.php', 'Dialog title', 600, 400, 
        {
            'Close': function() {
                $otherDialogContainer.dialog('close');
            }
        }
    );
    return false;
});

问题是加载外部页面的内容可能需要一些时间。在此之前，对话框不会出现，并且用户似乎没有发生任何事情。

我怎样才能修改该函数以使其像这样工作：

当用户点击调用上述函数的链接时，对话框会立即打开。对话框内有一些加载条或类似图像，表明内容正在加载。加载内容后，将其插入对话框中。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

嗯，这似乎可行：

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.html("<div style=\"height: "+(height-80)+
             "px; background: url('/images/ajax-loader.gif') center center no-repeat;\"></div>");
    div.dialog({
        title: title,
        width: width,
        height: height,
        position: 'middle',
        resizable: false,
        buttons: buttonsArray
    });
    $.ajax({
        url: uri,
        success: function(response) {
            div.html(response);
        },
        error: function(response) {
            alert(response);
        }
    });
}

【讨论】：

【解决方案2】：

            function showUrlInDialog(url) {
            var id = '<%= ResolveUrl("~/connecting.gif")%>';
            var tag = $("<div><div id='img' align='center'><img src='" + id + "' /></div></div>");
            tag.dialog({ show: 'fade', hide: 'fade', modal: false, closeOnEscape: false, draggable: false, autoOpen: false,
                resizable: false, close: function (event, ui) {
                    $(this).dialog('destroy');
                    $(this).dialog('close');
                    $(this).remove();
                }
            }).dialog('open');
            $.ajax({
                url: url,
                success: function (data) {
                    tag.append(data);
                    $("#img").hide();
                },
                error: function (data) {
                    $("#img").hide();
                }
            });
        }

【讨论】：