将类添加到 jquery 对话框按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1471727/
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
Add class to jquery dialog buttons
提问by nicosomb
I want to add css class on buttons of a jquery dialog box.
我想在 jquery 对话框的按钮上添加 css 类。
Here is my code :
这是我的代码：
$(document).ready(function(){
$('#messageBox p').html('bla bla bla. Ok?');
$('#messageBox').dialog({
modal : true,
buttons: {
'Yes': function() {
doSomething();
$(this).dialog('close');
},
'No': function() {
doAnotherThing();
$(this).dialog('close');
}
}
});
});
For example, I would like add ".red" class on my "yes" button.
例如，我想在“是”按钮上添加“.red”类。
How can I do that?
我怎样才能做到这一点？
Thank you!
谢谢！
回答by spin
buttons: [
{
text: "Submit",
"class": 'submit_class_name',
click: function() {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}
]
回答by nicosomb
I've got the solution, thanks to Rich :
感谢 Rich ，我找到了解决方案：
$(document).ready(function(){
$('#messageBox p').html('bla bla bla. Ok?');
$('#messageBox').dialog({
modal : true,
dialogClass: 'dialogButtons',
buttons: {
'Yes': function() {
doSomething();
$(this).dialog('close');
},
'No': function() {
doAnotherThing();
$(this).dialog('close');
}
}
});
});
$("div.dialogButtons div button:nth-child(1)").addClass("oneCssClass");
$("div.dialogButtons div button:nth-child(2)").addClass("anotherCssClass");
Solved!
解决了！
回答by Rich
There's a dialogClassoption of the dialogfunction you can use to specify a css class for the dialog itself. You can give it a unique class name and use this class name to get a reference to any child elements of the dialog. Then, use the selectors to either get a reference to the child buttons by position or by the text it contains (probably more efficient to use the former).
对话框函数有一个dialogClass选项，您可以使用它来为对话框本身指定一个 css 类。你可以给它一个唯一的类名，并使用这个类名来获取对对话框的任何子元素的引用。然后，使用选择器通过位置或它包含的文本获取对子按钮的引用（使用前者可能更有效）。
回答by Mark Robinson
Had same problem. Very similar to nico's solution but add the styling to the open function on the dialog:
有同样的问题。与 nico 的解决方案非常相似，但将样式添加到对话框的 open 函数中：
open: function () {
// add style to buttons (can't seem to do this via the button definition without breaking IE)
$(".someDialog .ui-dialog-buttonset button:first").not(".buttonPrimary").addClass("buttonPrimary");
$(".someDialog .ui-dialog-buttonset button:last").not(".buttonSecondary").addClass("buttonSecondary");
$("#someDialog").focus();
}
回答by Kevbo
I had a similar situation where i needed to add some styling to a button on the fly before the dialog was shown. Getting to the button was not very simple so i figured out a very simple way of getting to the buttons. During the creation of the dialog buttons i just gave them an 'id' and then i could get a reference to them with the usual jquery selector... $("#btnDelete").addClass("disabled")
我遇到了类似的情况，我需要在显示对话框之前即时向按钮添加一些样式。到达按钮并不是很简单，所以我想出了一个非常简单的方法来到达按钮。在创建对话框按钮的过程中，我只是给了它们一个“id”，然后我就可以使用通常的 jquery 选择器获得对它们的引用... $("#btnDelete").addClass("disabled")
buttons: [{
id: "btnDelete",
text: "Delete",
click: function () {
Delete();
$(this).dialog('close');
}
}, {
id: "btnSave",
text: "Save",
click: function () {
Save();
$(this).dialog('close');
}
}, {
id: "btnCancel",
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
回答by Jeff
.addClass function
.addClass 函数
