将CSS应用到jQuery对话框button
所以我现在有一个jQuery对话框有两个button：保存和closures。 我使用下面的代码创build对话框：
$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) } }); 但是，使用此代码时，两个button都是相同的颜色。 我想我的取消button是一个不同于我的保存颜色。 有没有办法做到这一点使用一些内置的jQuery选项？ 我没有从文档中获得很多帮助。
请注意，我正在创build的取消button是一个预定义的types，但是“保存”我正在定义自己。 不知道这是否会影响到这个问题。
任何帮助，将不胜感激。 谢谢。
更新：共识是有两条路在这里旅行：
- 使用像firebug这样的Firefox插件检查HTML，并注意jQuery应用于button的CSS类，并采取刺戳重写它们。 注意：在我的HTML中，两个button都使用了完全相同的CSS类，没有唯一的ID，所以这个选项已经不存在了。
- 在打开的对话框中使用jQueryselect器来捕捉我想要的button，然后添加一个CSS类。
我去第二个选项，并使用jQuery find（）方法，因为我认为这比使用更合适：first或：first-child b / c我想更改的button不一定是第一个button标记。 使用find，我可以指定button的名称，然后添加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) } });
我把我的答案转贴给一个类似的问题，因为似乎这里没有人给出答案 ，而且它更干净整洁：
使用替代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) } });
您可以使用打开的事件处理程序来应用其他样式：
open: function(event) { $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton'); }
我认为有两种方法可以处理：
- 如果两个button之间存在差异（类，ID等），使用类似于萤火虫的东西进行检查，并使用它来解决特定的button
- 使用类似于：第一个孩子来select例如第一个button和不同的样式
当我用对话框中的一个萤火虫查看源代码时，会出现如下所示的内容：
<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 （也许有一些额外的select器来确保我覆盖jquery的样式）来处理发送button。
顺便说一句，在这种情况下，我会select第二个选项，以避免焦点更改时出现问题。
你应该把“className”改成“class”
buttons: [ { text: "Cancel", class: 'ui-state-default2', click: function() { $(this).dialog("close"); } } ],
也许这样？
$('.ui-state-default:first').addClass('classForCancelButton');
select具有angular色对话框的div，然后获取相应的button并设置CSS。
$("div[role=dialog] button:contains('Save')").css("color", "green"); $("div[role=dialog] button:contains('Cancel')").css("color", "red");
为什么不只是检查生成的标记，请注意selectbutton上的类，并自己的样式？
还有一个简单的答案，用于定义只应用于特定button的特定样式，并且在声明对话框时可以让Jquery声明元素样式：
id: "button-delete", text: "Delete", style: "display: none;", click: function () {}
做完之后，这里是html显示的内容： 
这样做可以让你设置它，但是以后使用jquery不一定很容易。
我build议你看看代码吐出的HTML，看看是否有唯一标识一个（或两个）button（可能是id或name属性）的方法，然后使用jQuery来select该项目并应用css类到它。
如果还在注意为您工作，请在页面样式表中添加以下样式
.ui-widget-content .ui-state-default { border: 0px solid #d3d3d3; background: #00ACD6 50% 50% repeat-x; font-weight: normal; color: #fff; }
它会改变对话框button的背景颜色。
