jQuery UI 对话框，在按钮旁边添加元素答案

【问题标题】：jQuery UI Dialog, adding elements next to a buttonjQuery UI 对话框，在按钮旁边添加元素
【发布时间】：2009-12-17 02:40:52
【问题描述】：

jQuery UI 对话框的优点之一是它有一个按钮选项，可以自动正确定位它们。我只是想知道：我可以以某种方式将元素放在按钮旁边吗？我有一个小 Ajax-Loader gif，我想在对话框的左下角显示，而按钮则留在右下角？

我知道我可以删除按钮并在 HTML 中手动创建它们，但是由于 jQuery 已经为我处理了定位和样式，如果有意义的话，我想保留该功能。

    $("#newProjectDialog").dialog({
        bgiframe: true,
        resizable: false,
        width: 400,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Create': function() {
                $("#ajax-loader").show();
                // Make the Ajax Call and whatever else is needed
                $(this).dialog('destroy');
            },
            Cancel: function() {
                $(this).dialog('destroy');
            }
        }
    });

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

你基本上需要做的就是

//depending on what #ajax-loader is you maybe need to style it (float:left, ...)
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show();

低于包含一些注意事项的更高级的版本。

我想#ajax-loader 看起来和这个相似

<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div>

或者只是这个

<img id='ajax-loader' src='loader.gif' />

javascript 可以是这样的

...
'Create': function() {
    var btnpane = $("div.ui-dialog-buttonpane");
    //prevent bad things if create is clicked multiple times
    var there = btnpane.find("#ajax-loader").size() > 0;
    if(!there) {
        $("#ajax-loader").clone(true).appendTo(btnpane).show();
        // Make the Ajax Call and whatever else is needed
        // if ajax call fails maybe add $("#ajax-loader", btnpane).remove();
        $(this).dialog('destroy');
    }
},
...

备注

您应该在 ajax 请求的 complete 事件中调用 .dialog('destroy')，否则对话框可能会在 ajax 请求完成之前被破坏，用户甚至可能看不到“加载程序”。

【讨论】：

谢谢。是的，这就是我的生产代码目前正在做的事情，“按钮事件”以 Ajax 调用结束，而回调则完成了所有隐藏/关闭。
我选择了 "$(".ui-dialog-buttonpane:first").append(aj);"，其中 aj 是 $('
可惜我不能两次投票，“那里”检查本身就很棒。

【解决方案2】：

在第一个 ui-dialog-button 之前插入微调器怎么样？

buttons: {
   'Create' : function() {
       $('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first');
       ...ajax stuff...
       $(this).dialog('destroy');
    }
}

【讨论】：

.ui-dialog-button 不存在 :(
对不起 -- .ui-dialog-buttonpane 或 .ui-dialog-buttonpane > button:first
这对我不起作用。如果我删除 > 我会得到一个结果，但它的位置很糟糕。如何将按钮放在第一个按钮旁边？

【解决方案3】：

最好的方法是创建另一个按钮，使其完全透明且没有边框，然后添加动画 gif 作为其背景图像。通过使用另一个按钮，您可以轻松定位它相对于所有其他按钮的位置。

首先，为了能够为按钮设置更多样式，您需要以更高一级的定义来创建它们。所以而不是：

buttons: {
    'Create': function() {
        $("#ajax-loader").show();
        // Make the Ajax Call and whatever else is needed
        $(this).dialog('destroy');
    },
    Cancel: function() {
        $(this).dialog('destroy');
    }
}

这样做（注意方括号和多一级缩进）：

buttons: [
    {
        id: 'create-button',
        class: 'create-button-class',
        text: 'Create',
        click: function() {
            $("#ajax-loader").show();
            // Make the Ajax Call and whatever else is needed
            $(this).dialog('destroy');
        }
    },
        text: 'Cancel',
        click: function() {
            $(this).dialog('destroy');
        }
    }
]

您可以为每个按钮分配一个 id 和类，也可以不分配。如果您指定 id 和/或 class，则可以对其应用 CSS 样式。

<style>
.create-button-class{
    height:50px;
    width:50px;
    left:-300px; /* Pushes it left, change value for desired location. */
}
.ui-dialog .ui-dialog-buttonpane #create-button { 
    color: transparent; /* no inner color and also hides text */
    border: none; /* removes border */
    background-image:url(images/spinner-gif-25px.gif); /*replaces default image */
    background-size: 50px;
    background-repeat: no-repeat;
}
</style>

如果您愿意，可以创建一个普通的附加按钮，并使用 CSS 属性 left 将其推到按钮面板的最左侧，然后使其透明且无边框。

【讨论】：