jQuery jquery对话框保存取消按钮样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1138291/
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 dialog save cancel button styling
提问by Sabya
I am using jquery ui dialogs in my application. How do I style the "Save" and "Cancel" buttons differently in a jquery dialog? So "Save" is more appealing than the "Cancel". I could use a hyper link for "Cancel", but how do I place that in the same button panel?
我在我的应用程序中使用 jquery ui 对话框。如何在 jquery 对话框中以不同的方式设置“保存”和“取消”按钮的样式？所以“保存”比“取消”更有吸引力。我可以使用“取消”的超链接，但如何将其放置在同一个按钮面板中？
回答by Andriy Tkach
Here is how to add custom classes in jQuery UI Dialog (Version 1.8+):
以下是如何在 jQuery UI 对话框（版本 1.8+）中添加自定义类：
$('#foo').dialog({
'buttons' : {
'cancel' : {
priority: 'secondary', class: 'foo bar baz', click: function() {
...
},
},
}
});
回答by Alex Torrance
In jQueryUI 1.8.9 using classNamerather than classesworks.
在 jQueryUI 1.8.9 中使用className而不是classes工作。
$('#element').dialog({
buttons:{
"send":{
text:'Send',
className:'save'
},
"cancel":{
text:'Cancel',
className:'cancel'
}
});
回答by daveoncode
I'm using jQuery UI 1.8.13 and the following configuration works as I need:
我正在使用 jQuery UI 1.8.13 并且以下配置可以根据需要工作：
var buttonsConfig = [
{
text: "Ok",
"class": "ok",
click: function() {
}
},
{
text: "Annulla",
"class": "cancel",
click: function() {
}
}
];
$("#foo").dialog({
buttons: buttonsConfig
// ...
ps: remember to wrap "class" with quotesbecause it's a reserved word in js!
ps：记得把“class”用引号括起来，因为它是js中的保留字！
回答by maxp
It has been a while since this question was posted, but the following code works across all browsers (note although MattPII's answer works in FFox and Chrome, it throws script errors in IE).
自从发布这个问题已经有一段时间了，但以下代码适用于所有浏览器（请注意，尽管MattPII的答案适用于 FFox 和 Chrome，但它会在 IE 中引发脚本错误）。
$('#foo').dialog({
autoOpen: true,
buttons: [
{
text: 'OK',
open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button.
click: function() { alert('OK Clicked')}
},
{
text: "Cancel",
click: function() { alert('Cancel Clicked')}
}
]
});
回答by MattPII
As of jquery ui version 1.8.16 below is how I got it working.
从下面的 jquery ui 版本 1.8.16 开始，我是如何让它工作的。
$('#element').dialog({
buttons: {
"Save": {
text: 'Save',
class: 'btn primary',
click: function () {
// do stuff
}
}
});
回答by Angry Dan
These solutions are all very well if you only have one dialog in the page at any one time, however if you want to style multiple dialogs at once then try:
如果您在任何时候页面中只有一个对话框，这些解决方案都非常好，但是如果您想一次设置多个对话框的样式，请尝试：
$("#element").dialog({
buttons: {
'Save': function() {},
'Cancel': function() {}
}
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();
Instead of globally selecting buttons, this gets the widget object and finds it's button pane, then individually styles each button. This saves lot's of pain when you have several dialogs on one page
这不是全局选择按钮，而是获取小部件对象并找到它的按钮窗格，然后单独设置每个按钮的样式。当您在一页上有多个对话框时，这会节省很多痛苦
回答by paul
after looking at some other threadsI came up with this solution to add icons to the buttons in a confirm dialog, which seems to work well in version 1.8.1 and can be modified to do other styling:
在查看了其他一些线程后，我想出了这个解决方案，在确认对话框中向按钮添加图标，这似乎在 1.8.1 版中运行良好，并且可以进行修改以执行其他样式：
$("#confirmBox").dialog({
modal:true,
autoOpen:false,
buttons: {
"Save": function() { ... },
"Cancel": function() { ... }
}
});
var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');
$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");
I'd be interested in seeing if there was a better way to do it, but this seems pretty efficient.
我很想看看是否有更好的方法来做到这一点，但这似乎非常有效。
回答by JonnyDotNet
I had to use the following construct in jQuery UI 1.8.22:
我必须在 jQuery UI 1.8.22 中使用以下构造：
var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');
This removes all formatting and applies the replacement styling as needed.
Works in most major browsers.
这将删除所有格式并根据需要应用替换样式。
适用于大多数主要浏览器。
回答by Willy David Jr
I have JQuery UI 1.8.11 version and this is my working code. You can also customize its height and width depending on your requirements.
我有 JQuery UI 1.8.11 版本，这是我的工作代码。您还可以根据您的要求自定义其高度和宽度。
$("#divMain").dialog({
modal:true,
autoOpen: false,
maxWidth: 500,
maxHeight: 300,
width: 500,
height: 300,
title: "Customize Dialog",
buttons: {
"SAVE": function () {
//Add your functionalities here
},
"Cancel": function () {
$(this).dialog("close");
}
},
close: function () {}
});
回答by Paul Lorentzen
This function will add a class to every button in you dialog box. You can then style (or select with jQuery) as normal:
此函数将为对话框中的每个按钮添加一个类。然后您可以像往常一样设置样式（或使用 jQuery 选择）：
$('.ui-dialog-buttonpane :button').each(function() {
$(this).addClass($(this).text().replace(/\s/g,''));
});
