将CSS应用于jQuery对话框按钮

因此，我目前有一个带有两个按钮的jQuery对话框：保存和关闭。我使用以下代码创建对话框：

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

但是，使用此代码时，两个按钮的颜色相同。我希望我的“取消”按钮与“保存”使用不同的颜色。有没有办法使用一些内置的jQuery选项来做到这一点？我从文档中没有得到太多帮助。

请注意，我正在创建的“取消”按钮是预定义的类型，但是“保存”是我在定义自己。不知道这是否对这个问题有影响。

任何帮助，将不胜感激。谢谢。

更新：共识是这里有两条路可走：

1. 使用Firefox插件检查HTML firebug），并注意jQuery将jQuery应用于按钮的CSS类，并尝试重写它们。注意：在我的HTML中，两个按钮都使用了完全相同的CSS类，并且没有唯一的ID，因此没有此选项。
2. 在对话框打开时使用jQuery选择器来捕获我想要的按钮，然后向其添加CSS类。

我选择了第二个选项，并使用了jQuery find（）方法，因为我认为这比使用：first或：first-child b / c更合适，我想要更改的按钮不一定是列出的第一个按钮标记。使用find，我可以只指定按钮的名称，然后以这种方式添加CSS。我最终得到的代码如下：

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

我正在重新发布我的答案对类似问题的，因为似乎没有人在这里给出，而且它更加干净整洁：

使用替代buttons属性语法：

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

您可以使用open事件处理程序来应用其他样式：

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

我认为您可以通过两种方式处理该问题：

1. 检查两个按钮之间是否存在差异（类，ID等），并使用Firebug之类的东西来解决特定的按钮
2. 使用类似：first-child之类的东西来选择第一个按钮和样式，例如

当我在其中一个对话框中查看带有Firebug的源代码时，显示如下内容：

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

因此，我可以例如通过向.ui-state-focus添加一些样式来解决“发送”按钮（也许还有一些其他选择器，以确保我覆盖jquery的样式）。

顺便说一句，在这种情况下，我会选择第二种选择，以避免焦点改变时出现问题。

您应该将“ class”改为“ className”

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

也许是这样的吗？

$('.ui-state-default:first').addClass('classForCancelButton');

选择具有角色对话框的div，然后在其中添加适当的按钮并设置CSS。

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

对于定义仅将应用于该特定按钮的特定样式，还有一个简单的答案，您可以在声明对话框时让Jquery声明元素样式：

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

之后，这是html显示的内容：

这样做可以设置它，但是以后使用jquery进行更改不一定很容易。

为什么不只检查生成的标记，在选择的按钮上记录类并自己设置样式呢？

我建议您看一下代码溢出的HTML，看看是否有一种方法可以唯一地标识一个（或两个）按钮（可能是id或name属性），然后使用jQuery选择该项目并应用一个CSS类。

如果仍然有用，请在页面样式表上添加以下样式

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

它将更改对话框按钮的背景颜色。