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

然后我得到一个带红色文字的删除按钮.这还不错,但我真的很喜欢那个小垃圾也可以在删除按钮上进行精灵操作.

编辑:

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

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'
                    }
                });
[....]

Answer 2

自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图标.

看到它在行动.

Answer 3

尝试使用此行将垃圾桶图标添加到删除按钮.精灵必须在一个单独的元素中.

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

Answer 4

你还可以在按钮中添加id或其他attr,如下所示:

buttons:[
            {
                text: "Close",
                id: "closebtn",
                click: function() { $(this).dialog("close"); }
            }
        ],
open: function() {
            $("#closebtn").button({ icons: { primary: "ui-icon-close" } });
        }

Answer 5

此版本无需担心按钮中的文本即可运行

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