将 CSS 应用于 jQuery 对话框按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1828010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply CSS to jQuery Dialog Buttons
提问by MegaMatt
So I currently have a jQuery dialog with two buttons: Save and Close. I create the dialog using the code below:
所以我目前有一个带有两个按钮的 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)
}
});
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.
但是，使用此代码时，两个按钮的颜色相同。我希望取消按钮的颜色与保存按钮的颜色不同。有没有办法使用一些内置的 jQuery 选项来做到这一点？我没有从文档中得到太多帮助。
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:
更新：共识是这里有两条路可以走：
- 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.
- Use a jQuery selector on dialog open to catch the button that I wanted, and add a CSS class to it then.
- 使用 Firefox 插件（如firebug ）检查 HTML ，并注意 jQuery 应用于按钮的 CSS 类，并尝试覆盖它们。注意：在我的 HTML 中，两个按钮都使用了完全相同的 CSS 类并且没有唯一的 ID，所以这个选项被取消了。
- 在打开的对话框中使用 jQuery 选择器来捕捉我想要的按钮，然后向其中添加一个 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:
我选择了第二个选项，并使用了 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)
}
});
回答by Raphael Schweikert
I'm reposting my answerto a similar question because no-one seems to have given it here and it's much cleaner and neater:
我正在重新发布我对类似问题的回答，因为似乎没有人在这里给出它，而且它更干净整洁：
Use the alternative buttonsproperty syntax:
使用替代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)
}
});
回答by tvanfosson
You can use the open event handler to apply additional styling:
您可以使用 open 事件处理程序应用其他样式：
open: function(event) {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
}
回答by jeroen
I think there are two ways you can handle that:
我认为有两种方法可以处理：
- Check using something like firebug if there is a difference (in class, id, etc.) between the two buttons and use that to address the specific button
- Use something like :first-child to select for example the first button and style that one differently
- 如果两个按钮之间存在差异（在类、ID 等方面），请使用类似 firebug 之类的工具进行检查，并使用它来处理特定按钮
- 使用诸如 :first-child 之类的东西来选择例如第一个按钮和不同的样式
When I look at the source with firebug for one of my dialogs, it turns up something like:
当我查看其中一个对话框的带有 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>
So I could for example address the Send button by adding some styles to .ui-state-focus(with perhaps some additional selectors to make sure I override jquery's styles).
因此，例如，我可以通过向.ui-state-focus添加一些样式来解决“发送”按钮（可能还有一些额外的选择器以确保我覆盖 jquery 的样式）。
By the way, I′d go for the second option in this case to avoid problems when the focus changes...
顺便说一句，在这种情况下，我会选择第二个选项，以避免在焦点改变时出现问题......
回答by dfortun
You should change the word "className" for "class"
您应该将“className”一词更改为“class”
buttons: [
{
text: "Cancel",
class: 'ui-state-default2',
click: function() {
$(this).dialog("close");
}
}
],
回答by jitter
Select the div which has role dialog then get the appropriate buttons in it and set the CSS.
选择具有角色对话框的 div，然后在其中获取适当的按钮并设置 CSS。
$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red");
回答by Nick Spiers
Maybe something like this?
也许是这样的？
$('.ui-state-default:first').addClass('classForCancelButton');
回答by eragon2262
There is also a simple answer for defining specific styles that are only going to be applied to that specific button and you can have Jquery declare element style when declaring the dialog:
还有一个简单的答案来定义仅将应用于该特定按钮的特定样式，并且您可以在声明对话框时让 Jquery 声明元素样式：
id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}
after doing that here is what the html shows:
这样做之后，这是 html 显示的内容：
doing this allows you to set it, but it is not necessarily easy to change using jquery later.
这样做允许您设置它，但稍后使用 jquery 更改不一定容易。
回答by rfunduk
Why not just inspect the generated markup, note the class on the button of choice and style it yourself?
为什么不检查生成的标记，注意选择按钮上的类并自己设置样式？
回答by Rory
I suggest you take a look at the HTML that the code spits out and see if theres a way to uniquely identify one (or both) of the buttons (possibly the id or name attributes), then use jQuery to select that item and apply a css class to it.
我建议您查看代码吐出的 HTML，看看是否有办法唯一标识一个（或两个）按钮（可能是 id 或 name 属性），然后使用 jQuery 选择该项目并应用css 类。
回答by Qammar Feroz
If still noting is working for you add the following styles on your page style sheet
如果仍然注意为您工作，请在页面样式表上添加以下样式
.ui-widget-content .ui-state-default {
border: 0px solid #d3d3d3;
background: #00ACD6 50% 50% repeat-x;
font-weight: normal;
color: #fff;
}
It will change the background color of the dialog buttons.
它将更改对话框按钮的背景颜色。
