将CSS应用于jQuery对话框按钮

Question

所以我目前有一个带有两个按钮的jQuery对话框:Save and Close.我使用下面的代码创建对话框:

$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. 使用像firebug这样的Firefox插件检查HTML ,并记下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)
    }
});

Answer 1

我正在将我的答案转发给一个类似的问题,因为似乎没有人在这里给它并且它更清洁和更整洁:

使用替代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)
    }
});

Answer 2

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

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

Answer 3

我认为有两种方法可以解决这个问题:

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添加一些样式来解决Send按钮(可能还有一些额外的选择器以确保我覆盖jquery的样式).

顺便说一句,在这种情况下,我会选择第二个选项,以避免焦点发生变化时出现问题......