logo标签列表

jQuery UI对话框按钮定位

jqueryjquery-uimodal-dialog
31

如何在jQuery UI中将按钮分别定位？按钮都朝同一个方向排列。我想让一个按钮靠左对齐，而另一个按钮靠右对齐。这种操作是否可行？

13个回答
30

好的，通过使用Firebug查看...

对话框控件创建了一个带有类名为ui-dialog-buttonpane的div，因此您可以搜索该类。

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

因此，$(".ui-dialog-buttonpane button:first)应该获得第一个按钮。 而$(".ui-dialog-buttonpane button:last)应该获得最后一个按钮。

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

无论如何，这是我现在的方法。

然后稍微扩展一下选择器。$("div.dialog < .ui-dialog-buttonpane button:last")和$("div.dialog < .ui-dialog-buttonpane button:first")应该可以工作。div.dialog 应该是对话框的所有者。 - Chris Brandsma
我看到的和Brian C. Lane一样。我的页面上有多个对话框，Chris的建议在第一个对话框上运行良好，但是在此之后打开的任何对话框都无法正确对齐。我想不出原因。我在对话框的“打开”事件中调用选择代码，所以我认为它应该可以工作...奇怪。 - Nathan Beach
啊，现在我明白了。当你使用buttonpane选择器时，它会收集整个页面中的所有按钮，所以它仍然只会处理由jQuery创建的第一个按钮。现在我正在做类似这样的事情，并且它有效（缩小了按钮集的范围）：var form = $("#" + dialogId); var buttonpane = $(form).nextAll(".ui-dialog-buttonpane"); var theButton = buttonpane.find("button:first"); theButton.css("float", "left"); - Nathan Beach
我猜在注释中无法进行换行 - 抱歉，看起来很糟糕... - Nathan Beach
1
以上所有的原因正是我自己旋转“按钮面板”的原因。在DOM中翻找和调整CSS容易出错。我在我的对话框中放置了一个“BODY”div和一个“BUTTON”div，并以流畅的DOM/CSS方式清晰地处理显示。 - horace
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");
                }
            }
        });

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

<style>
    .leftButton
    {
        margin-right: 170px !important;
    }
</style>
3
如果上面的示例不适用于您使用的jQuery版本，则可以在不同的Stackoverflow问题中找到类似的示例（由Raphael Schweikert回答）：将CSS应用于jQuery对话框按钮。 - shawad
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”按钮始终固定在对话框左侧8像素处，而其他按钮则右对齐。如果您有多个需要左对齐的按钮，则需要增加左参数的宽度，包括每个按钮所需的间距，这在我看来并不优雅。但是，对于单个左对齐按钮，这非常好用。
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');}, 
                  }
        }
             ]
4
2

好的，根据@The Cook的回答，你可以在样式标签中更改这个CSS。另一种方法是在按钮内添加样式，不再需要CSS。祝好运。

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

我发现.ui-dialog-buttonset无论如何都会折叠，因此要在左下角和右下角添加两个按钮，只需像这样添加css：

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

第一行使按钮设置容器宽度为100％，第二行将找到的最后一个按钮推向右侧。

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

1

我遇到了同样的问题，但我找到了一个简单的解决方案，就是在定义 jQuery UI 对话框表单时改变按钮“确定”或“关闭”的顺序。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接