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选项来做到这一点？我没有从文档中获得太多帮助。

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

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

更新：达成共识是有两条路可以到达这里：

使用Firefox检查HTML 像firebug这样的插件，请注意 jQuery的CSS类应用于按钮，并采取刺穿他们。 注意：in 我的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)
    }
});

Answer 1

我正在将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)
    }
});

Answer 2

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

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

Answer 3

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

如果两个按钮之间存在差异（在课程，内容等方面）并使用该按钮来解决特定按钮，请使用类似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的样式）。

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

Answer 4

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

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

Answer 5

也许是这样的？

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

Answer 6

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

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

Answer 7

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

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

执行此操作后，html显示：

执行此操作允许您进行设置，但稍后使用jquery进行更改并不一定容易。

Answer 8

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

Answer 9

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

Answer 10

如果仍然需要注意，请在页面样式表中添加以下样式

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

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

将CSS应用于jQuery对话框按钮

10 个答案: