jQuery UI 对话框按钮图标
Posted
技术标签:
【中文标题】jQuery UI 对话框按钮图标【英文标题】：jQuery UI Dialog Button Icons 【发布时间】：2011-02-01 07:16:20 【问题描述】：是否可以在 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');
);
open 函数中的选择器似乎工作正常。如果我将以下内容添加到“打开”：
$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');
然后我得到一个带有红色文本的删除按钮。这还不错，但我真的很喜欢删除按钮上的那个小垃圾桶精灵。
编辑：
我对接受的答案做了一些调整：
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);
添加一些上边距会将图标向下推，因此它看起来像是垂直居中的。将 25 像素添加到按钮的宽度可防止按钮文本换行到第二行。
【问题讨论】：
这个问题终于在 3 个月前修复在 bugs.jqueryui.com/ticket/6830 【参考方案1】：在打开方法上添加自定义图标，如下所示：
$dialog.dialog(
resizable:false,
draggable:false,
modal:true,
open:function (event, ui)
$(this).parents('.ui-dialog').find('.cancel.ui-button')
.prepend('<i class="far fa-window-close"></i><span>
</span>');
,
"far fa-window-close" 是 bootstrap 很棒的图标
【讨论】：
【参考方案2】：根据Dialog > buttons option 文档，您可以传递一个对象或一组选项；后者允许您自定义按钮：
按钮
类型： 对象或数组默认值：
[]支持多种类型：
对象：键是按钮标签，值是点击关联按钮时的回调。 数组：数组的每个元素都必须是一个对象，定义了要在按钮上设置的属性、属性和事件处理程序。在 另外，可以使用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>【讨论】：
【参考方案3】：这是我使用的。在初始对话框定义期间为感兴趣的按钮分配一个 ID：
buttons:
[
id: "canxButton",
text: "Cancel",
icons:
primary: "ui-icon-cancel"
,
click: function () ...
然后您可以像这样更改文本/图标：
$("#canxButton").button("option", "label", "Done");
$("#canxButton").button( icons: primary: "ui-icon-close" );
【讨论】：
【参考方案4】：自 jQuery UI 1.10 起原生支持
从 jQuery UI 版本 1.10.0 开始，可以清晰地指定按钮图标，而无需借助 open 事件处理程序。语法是：
buttons: [
text: "OK",
icons: primary: "ui-icon-check"
,
text: "Cancel",
icons: primary: "ui-icon-closethick"
]
也可以指定secondary 图标。
See it in action。
【讨论】：
@Elaine：你不能这样设置它的 CSS 类。如果你需要这样做，你仍然需要使用open 事件处理程序。但也许可以根据其在 DOM 中的祖先来定位按钮，或者定位其中的 .ui-button-text 元素（由于图标设置的类，您可以这样做）代替？视具体情况而定。
@Elaine：我不确定什么是正确的，因为 a) API 文档没有提到类似的东西，b) 源代码似乎没有任何相关的内容（我刚刚检查过）和c）我只是快速尝试了一下，但没有成功（没有上课）。你能在 JSFiddle 上发布一个例子吗？【参考方案5】：
基于类的方法怎么样？
在您的 _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>
然后，在您创建对话框的文件中，执行以下操作：
$("#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());
);
那么您就不必依赖于搜索文本，而且它只需要在您的对话框中使用最少的代码。我在整个应用程序中都使用它来将 jquery UI 样式/图标应用于按钮，只需给它们一个类。
【讨论】：
【参考方案6】：尝试使用此行将垃圾桶图标添加到删除按钮。精灵必须在一个单独的元素中。
$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');
为了防止图标出现在按钮顶部：
$('.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>');
【讨论】：
不错。这将精灵放在按钮上，但它也使按钮的高度加倍，使精灵留在左上角。 啊，没关系，调用 .width() 为图标提供了一些空间，并防止按钮文本换行到第二行。 现在不是最好的答案。【参考方案7】：我遇到了同样的问题。似乎jquery将文本存储在按钮本身的一个名为“text”的属性中，而不是按钮内的文本。
我是这样解决的：
$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"
]
);
【讨论】：
感谢您的提示。这对我真的很有帮助:)【参考方案8】：将高度分配给“.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');
【讨论】：
【参考方案9】：你也可以为按钮添加 id 或其他属性，如下所示：
buttons:[
text: "Close",
id: "closebtn",
click: function() $(this).dialog("close");
],
open: function()
$("#closebtn").button( icons: primary: "ui-icon-close" );
【讨论】：
为什么？对我来说仍然很好，它比按标题选择按钮更好 它将在 jQ UI 1.9 中实现 @lonut 检查 1.9 源代码没有看到这正在实施。另见bugs.jqueryui.com/ticket/6830【参考方案10】：此版本无需担心按钮中的文本即可工作
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'
);
【讨论】：
【参考方案11】：或者，如果您不想影响任何其他对话框，
open: function()
$(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button(
icons: primary: 'ui-icon-circle-close'
);
$(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button(
icons: primary: 'ui-icon-circle-check'
);
【讨论】：
【参考方案12】：只是一个更新，因为我发现自己需要这样做。
我有多个对话框，它们都具有相同的关闭按钮，因此讨论如何将图标直接放置在您想要影响的对话框上很有用，以防万一您希望在不同的按钮上放置图标包含相同文本的对话框。
此外，所选解决方案实际上缺少几个已定义的 CSS 类，这些类可以解决位置问题。
下面的代码应该完全符合原始问题中的要求，并且更加精确。如果您想对所有带有删除按钮的对话框应用相同的垃圾桶图标，将 $('#DeleteDialog').parent() 选择器更改为 $('.ui-dialog-buttonpane') 即可实现该目标：
$('#DeleteDialog').parent()
.find('button:contains("Delete")')
.removeClass('ui-button-text-only')
.addClass('ui-button-text-icon-primary ui-button-text-icon')
.prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');
【讨论】：
【参考方案13】：我试过这个，它有效:)
[....]
open: function()
$('.ui-dialog-buttonpane').
find('button:contains("Cancel")').button(
icons:
primary: 'ui-icon-cancel'
);
[....]
【讨论】：
如果你有一个本地化的网站，这不起作用:)，或者随着“取消”变成一个变量，它会变得更加复杂以上是关于jQuery UI 对话框按钮图标的主要内容，如果未能解决你的问题，请参考以下文章