样式 jQuery 对话框按钮答案

【问题标题】：Style jQuery dialog buttons样式 jQuery 对话框按钮
【发布时间】：2016-03-24 14:02:21
【问题描述】：

我在一个 JS 文件中有一个函数，用于向对话框动态添加按钮：

 function addNewDialogButtons(buttons, id) {
var buttonPane = $(id).parent().find('.ui-dialog-buttonset');
$(buttonPane).empty();
$.each(buttons, function (index, props) {
    var newButton = $('<button></button>', {
        id: 'btn' + id + props.id,
        text: props.text
    });
    newButton.button().unbind().on("click", props.click);
    $(buttonPane).append(newButton);
});
}

在一个页面中我这样做：

 var buttons;
            var titleText = "Status Details";
            if (id == null) {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save", click: function () { AddStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            else {
                buttons = [{ text: "Cancel", click: function () { CloseDialog("#divDetails") } }, { text: "Save Changes", click: function () { UpdateStatus() } }];
                addNewDialogButtons(buttons, "#divDetails");
            }
            $(buttons).css("border", "1px solid blue");

我在 css 文件中有一个类：

 .displaybutton {
font-size: x-small;
background-color: whitesmoke;
color: blue;
border: 1px solid blue;
border-radius: 10px;
}

我曾尝试在add函数中、在对话框的open函数中以及其他几种方式中添加类，但收效甚微。它似乎唯一做的就是将文本设置为 x-small。类的其余部分没有用到，颜色、边框等。

关于如何做到这一点的任何想法？

【问题讨论】：

标签： jquery css dialog

【解决方案1】：

问题在于 var 按钮不是实际的按钮，而只是它在您的函数中的定义。因此，当您稍后执行$(buttons).css(...) 时，jQuery 找不到对象“按钮”。您有这些改进的可能性：

在您的函数 addNewDialogButtons() 中应用 css 样式
将 css 信息外包到 css 文件中，然后添加一个类你的按钮。
从您的函数中返回按钮对象
addNewDialogButtons() 并将该对象用于您的 css 指令。

【讨论】：

我在一串命令中添加了样式：newButton.css('font-size', 'x-small').css('background-color', 'whitesmoke').css( 'color', 'blue').css('border', '1px 纯蓝色').css('border-radius', '10px');