jQuery UI对话框按钮图标 [英] jQuery UI Dialog Button Icons

问题描述

是否可以在jQuery UI对话框的按钮上添加图标?我尝试过这种方式:

Is it possible to add icons to the buttons on a jQuery UI Dialog? I've tried doing it this way:

$("#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":

$('.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.

我对接受的答案作了一些调整:

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);

添加一些上边距可将图标向下推，因此它看起来像是垂直居中.在按钮的宽度上增加25 px，可以防止按钮的文字换行到第二行.

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.

推荐答案

尝试以下行以将垃圾桶图标添加到删除"按钮.精灵必须位于单独的元素中.

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>');

这篇关于jQuery UI对话框按钮图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！