jQuery Ui 对话框按钮，如何添加类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6702279/
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
jQuery Ui Dialog Buttons, How to add class?
提问by gerky
I found this answer on another thread..
我在另一个线程上找到了这个答案..
How to add multiple buttons in Jquery UI dialog box?
Using this syntax, how do you add class to a particular button?
使用此语法，您如何向特定按钮添加类？
$("#mydialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
采纳答案by Andrew Whitaker
It doesn't look like there's a great way to do this via the API, however you could add the classes in an event handler for create:
看起来没有通过 API 执行此操作的好方法，但是您可以将类添加到事件处理程序中create：
$("#dialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
},
create:function () {
$(this).closest(".ui-dialog")
.find(".ui-button:first") // the first button
.addClass("custom");
}
});
If you wanted the second button, you could use:
如果你想要第二个按钮，你可以使用：
$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button
The key is the $(this).closest(".ui-dialog").find(".ui-button"), which will select the buttons in your dialog. After that, you could apply any selector you want (including :contains(...)which might be useful if you want to select a button based on its text instead of its order).
关键是$(this).closest(".ui-dialog").find(".ui-button")，它将选择对话框中的按钮。之后，您可以应用您想要的任何选择器（包括:contains(...)如果您想根据其文本而不是其顺序来选择按钮，这可能会很有用）。
Here's an example: http://jsfiddle.net/jjdtG/
这是一个例子：http: //jsfiddle.net/jjdtG/
Also note that the CSS selector for the style(s) you want to apply has to be more specific than jQueryUI's built-in selectors in order for the styling to be applied.
另请注意，要应用的样式的 CSS 选择器必须比 jQueryUI 的内置选择器更具体，以便应用样式。
回答by Imran Khan
回答by LintonB
Hope it will help !
希望它会有所帮助！
$("#mydialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
"Cancel": {
click: function () {
$(this).dialog("close");
},
text: 'Cancel',
class: 'custom-class'
}
}
});
回答by bpeterson76
Use the open event handler:
使用 open 事件处理程序：
open: function(event) {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
}
Clean, simple, piece of cake!
干净，简单，小菜一碟！
回答by GeooffreyA
Thanks to LintonB, you can add all of the property attached to a button like style, id, etc...
感谢 LintonB，您可以添加所有附加到按钮的属性，如样式、id 等...
dialog_options.buttons = {
'Modify': {
click: function() {
$(this).dialog('close');
if (inputs.phone !== '') {
inputs.phone.focus();
inputs.phone[0].value = "";
}
},
class: 'btn btn-labeled btn-warning',
style: 'margin-right: 30px;',
id: 'modificationId'
},
'Keep': {
click: function() {
$(this).dialog('close');
_this.validatePhone(i);
},
class: 'btn btn-labeled btn-warning',
id: 'conserverId'
}
};
