将 CSS 应用于 jQuery 对话框按钮答案

【问题标题】：Apply CSS to jQuery Dialog Buttons将 CSS 应用于 jQuery 对话框按钮
【发布时间】：2010-12-22 03:07:39
【问题描述】：

所以我目前有一个带有两个按钮的 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 选项来做到这一点？我没有从文档中得到太多帮助。

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

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

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

使用 Firefox 检查 HTML firebug 之类的插件，并注意 jQuery 的 CSS 类适用于按钮，并采取试图压倒他们。 注意：在我的 HTML，两个按钮都使用了完全相同的 CSS 类并且没有唯一性 ID，所以这个选项被淘汰了。
在对话框打开时使用 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)
    }
});

【问题讨论】：

标签： jquery css jquery-ui button dialog

【解决方案1】：

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

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

完成后，html 显示如下：

这样做可以让你设置它，但以后使用jquery更改并不一定容易。

【讨论】：

【解决方案2】：

如果仍然注意到对您有用，请在页面样式表中添加以下样式

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

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

【讨论】：

【解决方案3】：

我将my answer 转发到一个类似的问题，因为这里似乎没有人给出它，而且它更干净整洁：

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

【讨论】：

似乎使用新版本的 jQuery UI（或 jQuery，我不能说），您可能已经将附加类的密钥从 className 更改为 "class"。
在版本 > jqueryui 1.8。存在类而不是类名。
@RaphaelSchweikert - 这将在 IE7/8/9 中引发脚本错误，请在此处查看解决方案：stackoverflow.com/questions/1138291/…
@maxp 什么样的脚本错误？一定要引用"class"，它不应该。

【解决方案4】：

你应该把“className”换成“class”

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

【讨论】：

使用class: 'ui-state-default2' 可能会导致浏览器问题，因为class 是某些JavaScript 版本(for reference) 中的关键字。请改用"class" : 'ui-state-default2'。

【解决方案5】：

选择具有角色对话框的 div，然后在其中获取相应的按钮并设置 CSS。

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

【讨论】：

其他说使用“打开”对话框选项的答案对我不起作用（尽管我使用的选择器在打开对话框后使用是正确的），但确实如此。

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

我认为有两种方法可以解决：

如果两个按钮之间存在差异（在类、ID 等方面），请使用 firebug 之类的东西检查，并使用它来处理特定按钮
使用 :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 的样式）。

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

【讨论】：

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

【解决方案8】：

我建议你看一下代码吐出的 HTML，看看是否有办法唯一标识一个（或两个）按钮（可能是 id 或 name 属性），然后使用 jQuery 选择该项目并为其应用一个 css 类。

【讨论】：

【解决方案9】：

也许是这样的？

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

【讨论】：

【解决方案10】：

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

【讨论】：

他没有提供标记。我的答案是在他更新前几个小时写的，他在其中指定了这一事实。