30

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

4

13 回答 13

30

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

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

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

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

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

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

于 2009-06-07T00:20:27.397 回答
18

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

 $('#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>
于 2012-10-27T19:15:30.860 回答
13

我最终得到了以下解决方案（基于 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 参数增加前一个按钮的宽度加上每个按钮所需的间距，这在我看来不太优雅。但是，对于单个左对齐按钮，这就像一个魅力。

于 2013-12-10T20:27:28.017 回答
4

您首先必须在 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');}, 
                  }
        }
             ]
于 2013-02-18T15:12:03.877 回答
4

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

于 2009-10-28T21:20:32.617 回答
2

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

                      "Ok":{                                
                            style:"margin-right:640px",                                
                            click: function () {
                                //Your Code 
                            }
                        },
于 2016-11-18T08:31:36.940 回答
1

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

于 2012-03-27T18:53:46.883 回答
1

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

于 2011-05-26T09:00:14.353 回答
1 
.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 中测试

于 2014-08-18T16:40:06.920 回答
1

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

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

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

于 2013-02-09T09:31:41.157 回答
0 
$('#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");
于 2013-08-05T16:01:09.093 回答
0

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

.ui-dialog-buttonset {
    width: 100%; 
    text-align: center
}
于 2021-01-22T20:48:21.210 回答
0

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

    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' });
    },
于 2020-02-06T22:11:52.210 回答