将CSS应用于jQuery对话框按钮 [英] Apply CSS to jQuery Dialog Buttons

问题描述

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

So I currently have a jQuery dialog with two buttons: Save and Close. I create the dialog using the code below:

$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选项？我没有从文档中获得太多帮助。

However, both buttons are the same color when this code is used. I'd like my Cancel button to be a different color than my Save. Is there a way to do this using some built in jQuery options? I didn't get much help from the documentation.

请注意，我正在创建的取消按钮是预定义的类型，但是保存我定义我。不确定是否会对这个问题产生任何影响。

Note that the Cancel button I'm creating is a pre-defined type, but 'Save' I'm defining myself. Not sure if that will have any bearing on the issue.

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

Any help would be appreciated. Thanks.

更新：一致认为，有两条路要到这里旅行：

UPDATE: Consensus was that there were two roads to travel here:

1. 使用Firefox
   插件检查HTML，如 firebug ，并注意
   应用于按钮的jQuery是
   的CSS类，并且将一个
   stab覆盖它们。注意：在
   我的HTML中，两个按钮都使用
   完全相同的CSS类，没有唯一的
   ID，所以这个选项是出来的。


2. 在对话框上使用jQuery选择器打开
   来捕获我想要的按钮，
   然后添加一个CSS类。

1. Inspect the HTML using a Firefox plugin like firebug, and note the CSS classes that jQuery is applying to the buttons, and take a stab at overriding them. Note: in my HTML, both buttons were used the exact same CSS classes and no unique IDs, so this option was out.
2. Use a jQuery selector on dialog open to catch the button that I wanted, and add a CSS class to it then.

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

I went with the second option, and used the jQuery find() method as I think this is more appropriate than using :first or :first-child b/c the button that I wanted to change wasn't necessarily the first button listed in the markup. Using find, I can just specify the name of the button, and add CSS that way. The code I ended up with is below:

$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)
    }
});

推荐答案

我正在转发我的回答问题是因为没有人似乎已经给了它，而且它更干净整洁。

I’m reposting my answer to a similar question because no-one seems to have given it here and it’s much cleaner and neater:

使用其他按钮属性语法：

$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)
    }
});

这篇关于将CSS应用于jQuery对话框按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！