jQuery UI 对话框按钮定位答案

【问题标题】：jQuery UI Dialog button positioningjQuery UI 对话框按钮定位
【发布时间】：2010-10-31 22:25:42
【问题描述】：

如何将 jQuery UI 中的按钮彼此分开放置。按钮以相同的方向对齐。我希望一个按钮向左对齐，而另一个按钮向右对齐。有可能吗？

【问题讨论】：

标签： jquery jquery-ui modal-dialog

【解决方案1】：

好的，通过 Firebug 看这个...

Dialog 控件创建一个带有ui-dialog-buttonpane 类的 div，因此您可以搜索它。

如果您要处理多个按钮，您可能需要:first 和:last 属性。

所以，$(".ui-dialog-buttonpane button:first) 应该为您提供第一个按钮。 $(".ui-dialog-buttonpane button:last) 应该会为您提供最后一个按钮。

您可以从那里修改 css/style 以将每个按钮放在右侧和左侧（修改浮点值）。

无论如何，这就是我现在的处理方式。

【讨论】：

然后稍微展开选择器。 $("div.dialog
我看到的和 Brian C. Lane 一样。我在页面中有多个对话框，Chris 的建议在第一个对话框中运行良好，但之后打开的任何对话框都无法正确对齐。我不知道为什么。我在对话框的“打开”事件中调用选择代码，所以我认为它应该可以工作......很奇怪。
啊，现在我明白了。当您执行按钮窗格选择器时，它会收集整个页面中的所有按钮，因此它仍然只执行 jQuery 创建的第一个按钮。我现在正在做这样的事情并且它可以工作（缩小按钮集的范围）： var form = $("#" + dialogId); var buttonpane = $(form).nextAll(".ui-dialog-buttonpane"); var theButton = buttonpane.find("button:first"); theButton.css("float", "left");`
我猜不可能在 cmets 中进行换行 - 抱歉，这看起来像废话......

【解决方案2】：

这就是我能够完成结果的方式。

 $('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    class: 'leftButton',
                    text: 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });

然后在 Styles 中添加 !important 标志，这是必需的，因为该类首先出现并被 jquery 覆盖。

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>

【讨论】：

如果上面的示例不适用于您的 jQuery 版本，在另一个 Stackoverflow 问题上有一个类似的示例（由 Raphael Schweikert 回答）：Apply CSS to jQuery Dialog Buttons

【解决方案3】：

我最终得到了以下解决方案（基于 The Cook 的回答）。与其他答案相比，这有很多优势（对我来说）：

纯 HTML/CSS - 无 javascript
无需在对话框上设置固定宽度（按钮将始终与左边缘对齐，即使用户调整对话框大小也是如此）
CSS 中不需要 !important 标志

我使用的 HTML（根据 The Cook 的回答稍作修改）：

$('#dialog-UserDetail').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        buttons: {
            DelUser:{ 
                class: 'leftButton',
                text: 'Delete User',
                click : function (){
                    alert('delete here');
                }
            },
            "Update User": function () {
                   alert('update here');
       },
            Close: function () {
                $(this).dialog("close");
            }
        }
    });

然后我使用了以下 CSS：

.leftButton
{
    position: absolute;
    left:8px;
}

结果是“leftButton”按钮始终固定在对话框左边缘 8px 处，而其他按钮右对齐。如果您有多个按钮需要左对齐，那么您需要将 left 参数增加前一个按钮的宽度加上您想要的每个按钮的间距，这在我看来不太优雅。但是，对于单个左对齐按钮，这就像一个魅力。

【讨论】：

【解决方案4】：

您还可以将类添加到您的对话框 (http://docs.jquery.com/UI/Dialog#option-dialogClass) 以本地化您的样式。

【讨论】：

【解决方案5】：

您首先必须在 jquery-ui.css 中将 .ui-dialog-buttonset 的宽度更改为 100%

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;}

然后在您的模态声明中，对于按钮，您可以执行如下明确的操作：

buttons: [
        {
           text: "Close",
           open: function(){
                        $(this).css('float','left');}, 
                  }
        }
             ]

【讨论】：

【解决方案6】：

好的，正如@The Cook 的回答，您可以在样式标签中更改此 css。换一种方式思考。您可以在按钮内添加样式，不再需要 css。祝你好运。

                      "Ok":{                                
                            style:"margin-right:640px",                                
                            click: function () {
                                //Your Code 
                            }
                        },

【讨论】：

【解决方案7】：

我遇到了同样的问题，但我找到了一个简单的解决方案，即每当我们定义 jquery ui 对话框表单时，我们更改按钮的顺序确定或关闭表单对话框。

【讨论】：

【解决方案8】：

选择后尝试：
.prependTo(".ui-dialog-buttonpane");

【讨论】：

【解决方案9】：

我发现 .ui-dialog-buttonset 折叠起来没有宽度，所以要在左下角和右下角放置两个按钮，只需像这样添加 css：

.ui-dialog-buttonset {width:100%}
.ui-dialog-buttonset .ui-button:last-child {float:right !important;}

第一行使按钮集容器 100% 宽，第二行将找到的最后一个按钮推到右侧。

【讨论】：

【解决方案10】：

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important;
  text-align:right;
}

.ui-button-left {
  float: left;
}

这不会影响默认按钮，它们会显示在右侧。此外，您可以在左侧放置任意数量的按钮，而无需为每个按钮设置特殊格式。要设置左侧按钮的类，有很多方法。

作为对话框定义的一部分：

$("#mydialog").dialog(
    {buttons: [
        {"class": "ui-button-left", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

或者你可以这样做：

$("#mydialog").dialog(
    {buttons: [
        {"id": "myDeleteButton", "text": "Delete"},
        {"text": "Cancel"},
        {"text": "Save"}
    ]});

稍后将 'myDeleteButton' 对象的 css 样式设置为向左浮动。如果您还想在不重新创建对话框的情况下显示或隐藏按钮，设置按钮 ID 会很有帮助。

在 Chrome、Safari、FF、IE11、jQuery UI 1.10 中测试

【讨论】：

【解决方案11】：

$('#dialog-UserDetail').dialog({
            autoOpen: false,
            height: 318,
            width: 531,
            modal: true,
            resize: false,
            buttons: {
                DelUser:{ 
                    text  : 'Delete User',
                    click : function (){
                        alert('delete here');
                    }
                },
                space: { 
                    text  : '',
                    id : 'space',
                    width : '(the distance you want!)',
                },
                "Update User": function () {
                       alert('update here');
           },
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });
$("#space").visibility("hidden");

【讨论】：

这样就不用css了，只要把中间的按钮设置成visibility="hidden"就行了，按钮的宽度应该是你喜欢的xxpx，有什么不懂的可以留言我'米贾尔斯。随便聊聊
一个隐藏按钮只是为了不需要任何 CSS...现在这是一个 hack。 :)

【解决方案12】：

我使用以下方法仅左对齐第一个按钮。这适用于任何对话框宽度：

    open: function(event, ui) {
        var firstButton = $(this).parent().find('.ui-dialog-buttonpane button:first')
        var firstButtonPos = firstButton.position().left - 15;
        firstButton.css({ marginRight: firstButtonPos + 'px', color: 'red' });
    },

【讨论】：

【解决方案13】：

我所做的只是将以下内容添加到 CSS 中以使按钮居中。这里的关键是将宽度设置为 100%，bc 检查萤火虫，宽度只是按钮的大小。

.ui-dialog-buttonset {
    width: 100%; 
    text-align: center
}

【讨论】：