Question

我想将添加到我的对话框中的按钮移动到顶部或左侧，如何使用jquery ui完成此操作。如果添加了ok，它会显示在极右端，是否可以放置？

$(function() {
$("#dialog-message").dialog({
    modal : true,
    resizable : false,
    buttons : {
        ok:function() {
            $(this).dialog("close");
        }
    }

    });
});

Answer 1

要将按钮左/中/右对齐，请禁用浮动并相应调整text-align属性：

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   float: none;
}

.ui-dialog .ui-dialog-buttonpane {
     text-align: center; /* left/center/right */
}

<强> DEMO

这是按钮的标记：

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <div class="ui-dialog-buttonset">
        <!-- the buttons are here -->
    </div>
</div>

默认的css指定：

text-align: left;

.ui-dialog-buttonpane 元素float:right
.ui-dialog-buttonset

Answer 2

虽然上面的答案很棒，但它适用于所有按钮。下面的示例是一个模态对话框，可以单独定位每个按钮，也可以单独设置样式。

        $("#divModelPopup").dialog({
            closeOnEscape: false,
            width: 500,
            minWidth: 500,
            minHeight: 400,
            modal: true,
            open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            title: "Terms & Conditions",
            buttons: {
                "I Decline": {
                    click: function () {
                        $(".lnkLogout").click();
                    },
                    text: "I Decline",
                    class: "btnDlgDecline"
                },
                "I Accept": {
                    click: function () {
                        $(this).dialog("close");
                        // Update user details as accepted
                        $.ajax({
                        .... Ajax call
                        });
                    },
                    text: "I Accept",
                    class: "btnDlgAccept"
                },
                "Print": function () {
                    $("#divModelPopupPrintArea").printArea(options);
                }
            },
            resize: function (event, ui) {
                $("#divModelPopupScroll").height(ui.size.height / 1.27);
            }
        });

然后在CSS中，

.btnDlgDecline{
    position: absolute;
    left: 10px;
    color: red !important;
}

.btnDlgAccept{
    color: green !important;
}

希望它有所帮助。

Answer 3

您可以在按钮标签内更改按钮的样式。

import numpy as np
import numpy_indexed as npi
a = np.random.randint(0, 10, (10))
max = np.maximum.accumulate(a)
idx = npi.indices(a, max)
print(idx)

此样式也适用于多个对话框。好运。

Answer 4

如果您有三个按钮，并且您希望它们在线上分发得很好，请尝试：

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: center; /* left/center/right */

}
.ui-button {
    margin-left: 5% !important;
    margin-right: 5% !important;
}

小心，正如之前所说，重要很重要

享受，

在对话框中自定放置按钮 - jquery ui

4 个答案: