jQuery UI：对话框按钮样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2468928/
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 button styling
提问by Peter Bridger
Is there an easy way to apply CSS/icons to the modal buttons on a jQuery UI modal dialog box?
是否有一种简单的方法可以将 CSS/图标应用于 jQuery UI 模态对话框上的模态按钮？
If I include the HTML to display an icon with the button text, it shows the HTML as text rather than rendering the code.
如果我包含 HTML 以显示带有按钮文本的图标，它会将 HTML 显示为文本而不是呈现代码。
I'm guessing I could write some jQuery to find the button and overwrite the HTML with what I want, but I'm hoping there's an easier more direct way.
我猜我可以写一些 jQuery 来找到按钮并用我想要的东西覆盖 HTML，但我希望有一种更简单更直接的方法。
回答by rafbel
I can see its pretty old question but you can do it now in much nicer way in jQuery UI, just add 'class' or 'style' properties to button object like this:
我可以看到它很老的问题，但您现在可以在 jQuery UI 中以更好的方式完成它，只需将 'class' 或 'style' 属性添加到按钮对象，如下所示：
$("#id-dialog").dialog({
modal: true,
buttons: [
{ text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" },
{ text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"}
]
});
回答by Joel D'Souza
This is what I'm using right now for our projects:
这就是我现在在我们的项目中使用的：
$("#id-dialog").dialog({
modal: true,
buttons: {
'Login': logIn,
Cancel: logOut
},
open: function() {
$buttonPane = $(this).next();
$buttonPane.find('button:first').addClass('accept').addClass('ui-priority-primary');
$buttonPane.find('button:last').addClass('cancel').addClass('ui-priority-secondary');
}
});
First and last work in this case since there are only two buttons. You can use the :nth-child(index) if you have more than two buttons.
在这种情况下，第一个和最后一个工作，因为只有两个按钮。如果您有两个以上的按钮，您可以使用 :nth-child(index)。
Another way to do this would be to refer to the parent element which encompasses both the dialog div element as well as the buttonpane div element, and then look for the individual buttons within the parent element.
另一种方法是引用包含对话框 div 元素和按钮窗格 div 元素的父元素，然后在父元素中查找各个按钮。
回答by paul
This thread - jQuery UI confirmation dialog - manipulating output- seems to provide a cleaner option, which should execute faster than a find.
这个线程 - jQuery UI 确认对话框 - 操作输出- 似乎提供了一个更清晰的选项，它应该比查找执行得更快。
$('.ui-dialog-buttonpane').children('button')[1]
I got stuck trying to use it at first, but got it working after noticing that this will not return a jquery DOM object; it returns the html, so you need to stick it inside a jquery operator to use it. For example -
一开始我在尝试使用它时遇到了困难，但是在注意到这不会返回 jquery DOM 对象后让它工作了；它返回 html，因此您需要将其粘贴在 jquery 运算符中才能使用它。例如 -
var button1 = $('.ui-dialog-buttonpane').children('button')[1];
$(button1).removeClass('ui-button-text-only').addClass('ui-button-text-icon');
回答by dragoon
Yes, you can overwrite modal dialog css classes to suit your needs. For example you create dialog with specifying your custom class:
是的，您可以覆盖模态对话框 css 类以满足您的需要。例如，您创建对话框并指定您的自定义类：
$("#id-dialog").dialog({
dialogClass: "loadingScreenWindow",
...
And then in css:
然后在 css 中：
/* hide the title bar on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar {
display: none;
}
See http://docs.jquery.com/UI/Dialog#themingfor the dialog style classed available
有关分类可用的对话框样式，请参阅http://docs.jquery.com/UI/Dialog#theming
