jQuery UI 对话框按钮图标

Question

是否可以向 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');

然后我确实得到了一个带有红色文本的删除按钮。这还不错，但我真的很喜欢“删除”按钮上的那个小垃圾桶 Sprite 。

编辑:

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

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 可防止按钮文本换行到第二行。

Answer 1

我尝试过这个，它有效:)

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]