相关疑难解决方法(0)

jQuery UI对话框按钮图标

是否可以在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');
    }
});
Run Code Online (Sandbox Code Playgroud)

open函数中的选择器似乎工作正常.如果我将以下内容添加到"打开":

$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');
Run Code Online (Sandbox Code Playgroud)

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

编辑:

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

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);
Run Code Online (Sandbox Code Playgroud)

添加一些上边距会将图标向下推,因此它看起来像是垂直居中.将25 px添加到按钮的宽度可使按钮文本不会换行到第二行.

jquery jquery-ui jquery-ui-dialog

53
推荐指数
5
解决办法
7万
查看次数

标签 统计

jquery ×1

jquery-ui ×1

jquery-ui-dialog ×1