将CSS应用于jQuery对话框按钮

Question

我目前有一个带有两个按钮（保存和关闭）的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插件（如firebug）检查HTML，并注意jQuery应用于按钮的CSS类，并尝试覆盖它们。注意：在我的HTML中，两个按钮使用完全相同的CSS类和无唯一ID，因此此选项不适用。 2.在打开对话框时使用jQuery选择器捕获所需按钮，并添加CSS类。

我选择了第二个选项，并使用了jQuery find()方法，因为我认为这比使用:first或:first-child更合适，因为要更改的按钮不一定是标记中列出的第一个按钮。使用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)
    }
});

- Matt

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

- Raphael Schweikert

---

似乎在新版本的jQuery UI（或者jQuery，我不能确定）中，你可能需要将额外类的键从className更改为"class"。 - Raphael Schweikert

在版本大于jqueryui 1.8中，存在class而非className。 - kajo

@RaphaelSchweikert - 这将在IE7/8/9中引发脚本错误，请参见此处的解决方案：http://www.stackoverflow.com/questions/1138291/jquery-dialog-save-cancel-button-styling/10415919#10415919 - maxp

@maxp 是什么类型的脚本错误？请确保引用了“class”，并且它不应该出现。 - Raphael Schweikert

Answer 2

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

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

- tvanfosson

---

当你只有一个对话框时，这个可以正常工作。但是如果你从第一个对话框打开一个新的对话框，它只能在第一次起作用。也就是说，当你关闭第二个对话框然后重新打开它时，样式不再被应用。 - Adrian P.

Answer 3

我认为你可以用以下两种方法来处理：

1. 使用类似firebug的工具检查两个按钮之间是否有差异（如class、id等），然后使用该差异来定位特定的按钮。
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的样式），例如来控制发送按钮。

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

- jeroen

---

关于添加按钮焦点状态的解决方案。 - Chris22

Answer 4

您应该将单词“className”更改为“class”

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

- dfortun

---

使用 class: 'ui-state-default2' 可能会在某些 JavaScript 版本中导致浏览器问题，因为 class 是一个保留字（关键字） (参考链接)。请改用 "class": 'ui-state-default2'。 - sinemetu1

Answer 5

也许像这样吗？

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

- Nick Spiers

Answer 6

选择具有role dialog属性的div，然后获取其中适当的按钮并设置CSS。

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

- jitter

---

其他的答案说要使用“打开”对话框选项，但对我来说并没有起作用（尽管如果在对话框打开后使用我正在使用的选择器是正确的），但这个方法可以。 - Chris Lawlor

Answer 7

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

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

在这样做之后，HTML显示如下：

这样做可以设置它，但使用jQuery稍后更改可能并不容易。

- eragon2262

Answer 8

为什么不直接检查生成的标记，注意所选按钮上的类，并自行设置样式呢？

- rfunduk

---

他没有提供标记。我的答案是在他更新并指明了这一事实的几个小时之前写的。 - rfunduk

Answer 9

如果仍然没有任何效果，请在您的页面样式表中添加以下样式。

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

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

- Qammar Feroz

Answer 10

我建议你查看代码生成的HTML，并检查是否有一种方法可以唯一标识一个或两个按钮（可能是id或name属性），然后使用jQuery选择该项并将CSS类应用于它。

- Rory