Question

如何将jQuery UI中的按钮彼此分开定位。按钮在同一方向上对齐。我希望一个按钮与左边对齐，而另一个按钮在右边。有可能吗？

Answer 1

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

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

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

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

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

无论如何，这就是我现在接近它的方式。

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

然后在样式中添加！important标志，这是必需的，因为该类首先被jquery覆盖。

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

Answer 3

我结束了以下解决方案（根据库克的回答）。与其他答案相比，这有许多优点（对我而言）：

纯HTML / CSS - 没有javascript
无需在对话框上设置固定宽度（即使用户调整对话框大小，按钮也始终与左边缘对齐）
CSS

我使用的HTML（从库克的答案中略有修改）：

$('#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;
}

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

Answer 4

您还可以在对话框中添加类（http://docs.jquery.com/UI/Dialog#option-dialogClass）以本地化样式。

Answer 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');}, 
                  }
        }
             ]

Answer 6

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

Answer 7

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

Answer 8

我发现.ui-dialog-buttonset向下折叠没有宽度，所以在左下角和右下角放置两个底部就像这样添加css：

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

第一行使按钮设置容器100％宽，第二行按下右边的最后一个按钮。

Answer 9

.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中进行了测试

Answer 10

好吧，作为@The Cook的回答，你可以在样式标签中更改这个css。另一种方式。你可以在按钮内添加样式，不再需要css.Good Luck。

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

Answer 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");

Answer 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' });
    },

Answer 13

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

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

jQuery UI对话框按钮定位

13 个答案: