jQuery UI对话框按钮图标
jQuery UI对话框按钮图标
提问于 2010-03-27 01:51:31
是否可以将图标添加到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函数中的选择器似乎工作得很好。如果我将以下内容添加到“open”中：
$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');然后我得到了一个带有红色文本的Delete按钮。这不坏，但我真的很喜欢删除按钮上的那个小垃圾桶。
编辑：
我对公认的答案做了两处调整：
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像素可以防止按钮文本换行到第二行。
回答 11
Stack Overflow用户
回答已采纳
发布于 2010-03-27 02:50:26
尝试使用此行将垃圾桶图标添加到delete按钮。精灵必须在单独的元素中。
$('.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>');Stack Overflow用户
发布于 2010-08-03 12:11:12
我试过了，它起作用了:)
[....]
open: function() {
$('.ui-dialog-buttonpane').
find('button:contains("Cancel")').button({
icons: {
primary: 'ui-icon-cancel'
}
});
[....]Stack Overflow用户
发布于 2011-04-22 05:45:34
您还可以向按钮添加id或其他属性，如下所示：
buttons:[
{
text: "Close",
id: "closebtn",
click: function() { $(this).dialog("close"); }
}
],
open: function() {
$("#closebtn").button({ icons: { primary: "ui-icon-close" } });
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2525524
复制相关文章
相似问题