jQuery UI 对话框按钮图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2525524/
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 Icons
提问by Cory Grimster
Is it possible to add icons to the buttons on a jQuery UI Dialog? I've tried doing it this way:
是否可以将图标添加到 jQuery UI 对话框上的按钮？我试过这样做：
$("#DeleteDialog").dialog({
resizable: false,
height:150,
modal: true,
buttons: {
'Delete': function() {
/* Do stuff */
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
open: function() {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');
$('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');
}
});
The selectors in the open function seem to be working fine. If I add the following to "open":
open 函数中的选择器似乎工作正常。如果我将以下内容添加到“打开”中：
$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');
then I do get a Delete button with red text. That's not bad, but I'd really like that little trash can sprite on the Delete button as well.
然后我确实得到了一个带有红色文本的删除按钮。这还不错，但我真的很喜欢删除按钮上的那个小垃圾桶精灵。
Edit:
编辑：
I made a pair of tweaks to the accepted answer:
我对接受的答案进行了一些调整：
var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);
Adding some top margin pushes the icon down, so it looks like it's centred vertically. Adding 25 px to the button's width keeps the button text from wrapping onto a second line.
添加一些上边距会将图标向下推，因此它看起来像是垂直居中。将 25 px 添加到按钮的宽度可以防止按钮文本换行到第二行。
采纳答案by enduro
Try this line to add the trash icon to the delete button. The sprite has to be in a separate element.
尝试使用此行将垃圾桶图标添加到删除按钮。精灵必须在一个单独的元素中。
$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');
In order to prevent the icon from appearing on the top of the button:
为了防止图标出现在按钮顶部：
$('.ui-dialog-buttonpane')
.find('button:contains("Delete")')
.removeClass('ui-button-text-only')
.addClass('ui-button-text-icon-primary')
.prepend('<span class="ui-icon ui-icon-trash"></span>');
回答by David K
i' tried this, and it works :)
我试过了，它有效:)
[....]
open: function() {
$('.ui-dialog-buttonpane').
find('button:contains("Cancel")').button({
icons: {
primary: 'ui-icon-cancel'
}
});
[....]
回答by Jon
Natively supported since jQuery UI 1.10
自 jQuery UI 1.10 起原生支持
Starting from jQuery UI version 1.10.0, it is possible to cleanly specify button icons without resorting to openevent handlers. The syntax is:
从 jQuery UI 版本 1.10.0 开始，可以干净地指定按钮图标而无需求助于open事件处理程序。语法是：
buttons: [
{
text: "OK",
icons: { primary: "ui-icon-check" }
},
{
text: "Cancel",
icons: { primary: "ui-icon-closethick" }
}
]
It is also possible to specify a secondaryicon.
也可以指定一个secondary图标。
回答by d1Mm
also you can add id or other attr to button, like this:
您也可以向按钮添加 id 或其他属性，如下所示：
buttons:[
{
text: "Close",
id: "closebtn",
click: function() { $(this).dialog("close"); }
}
],
open: function() {
$("#closebtn").button({ icons: { primary: "ui-icon-close" } });
}
回答by Fabrizio
This version works without having to worry about the text in the buttons
此版本无需担心按钮中的文字即可工作
open: function() {
$(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
icons: { primary: 'ui-icon-circle-close' }
});
$(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
icons: { primary: 'ui-icon-circle-check' }
});
}
回答by hoyt1969
Here is what I use. Assign an ID to the button of interest during the initial dialog definition:
这是我使用的。在初始对话框定义期间为感兴趣的按钮分配一个 ID：
buttons:
[
{
id: "canxButton",
text: "Cancel",
icons: {
primary: "ui-icon-cancel"
},
click: function () { ...
Then you can change text/icon like this:
然后你可以像这样更改文本/图标：
$("#canxButton").button("option", "label", "Done");
$("#canxButton").button({ icons: {primary: "ui-icon-close"} });
回答by Jareish
I ran in the same issue. It seems jquery stores the text in an attribute called "text" in the button itself, and not as text inside the button.
我遇到了同样的问题。似乎 jquery 将文本存储在按钮本身中名为“text”的属性中，而不是按钮内的文本。
I solved it like this:
我是这样解决的：
$dialog.dialog({
resizable:false,
draggable:false,
modal:true,
open:function (event, ui) {
$(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
//or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
$(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
},
buttons:[
{
text:"OK",
click:function () {
},
"class":"add"
},
{
text:"Cancel",
click:function () {
},
"class":"cancel"
}
]
});
回答by Pandincus
How about a class-based approach?
基于类的方法怎么样？
In your _layout.cshtmlfile put something like the following:
在您的_layout.cshtml文件中放置如下内容：
<script type="text/javascript">
$(function () {
stylizeButtons();
}
function stylizeButtons(parent) {
if (parent == undefined) {
parent = $("body");
}
// Buttons with icons
$(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
$(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
$(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
$(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
$(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
$(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
$(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
$(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
$(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
$(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
$(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
$(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
$(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>
Then, in the file where you are creating the dialog, do something like this:
然后，在您创建对话框的文件中，执行如下操作：
$("#doStuff-dialog").dialog({
title: "Do Some Stuff",
modal: true,
buttons: [
{
text: "Yes",
class: "my-button-submit",
click: function () {
$(this).dialog("close");
}
},
{
text: "No",
class: "my-button-cancel",
click: function () {
$(this).dialog("close");
}
}
],
open: function () {
stylizeButtons($("#doStuff-dialog").parent());
}
});
Then you never have to rely on searching for text, and it requires a minimal amount of code in your dialog. I use this throughout my applications to apply jquery UI styling/icons to buttons just by giving them a class.
这样您就不必依赖于搜索文本，而且它只需要在您的对话框中使用最少的代码。我在整个应用程序中使用它来将 jquery UI 样式/图标应用于按钮，只需给它们一个类。
回答by Salman A
According to Dialog > buttons optiondocumentation you can pass an object or an array of options; the latter allows you to customize the buttons:
根据对话框 > 按钮选项文档，您可以传递一个对象或一组选项；后者允许您自定义按钮：
buttons
Type:Object or Array
Default:[]Multiple types supported:
- Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
- Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button. In addition, a key of
iconscan be used to control button's icons option, and a key ofshowTextcan be used to control button's text option.
纽扣
类型：对象或数组
默认值：[]支持多种类型：
- Object：键是按钮标签，值是单击关联按钮时的回调。
- Array：数组的每个元素都必须是一个对象，用于定义要在按钮上设置的属性、属性和事件处理程序。另外，一个键
icons可以用来控制按钮的图标选项，一个键showText可以用来控制按钮的文本选项。
$(function() {
var buttons = [];
buttons.push({
text: "Yes",
// icon options
icons: { primary: "ui-icon-check" },
// attributes
"class": "hawt-button",
title: "Aye!"
});
buttons.push({
text: "Yes to All",
icons: { secondary: "ui-icon-check" }
});
buttons.push({
text: "Please",
icons: { primary: "ui-icon-notice" },
// text options
showText: false
});
buttons.push({
text: "Cancel",
icons: { secondary: "ui-icon-close" },
// properties
disabled: true
});
$("#dialog").dialog({
width: "auto",
buttons: buttons
});
});@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
.ui-button.hawt-button {
color: hotpink;
}<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog" title="Confirmation">
<p>Delete all files from your hard drive?</p>
</div>回答by jkl
assign height to ".ui-dialog .ui-button" like as following:
将高度分配给“.ui-dialog .ui-button”，如下所示：
.ui-dialog .ui-button {
height:36px;
}
.ui-icon-kl_exit {
height:32px;
width:32px;
display:block;
background-image: url('../icons/exit32.ico');
}
