Можно ли добавлять значки к кнопкам в диалоговом окне 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');
}
});
Селекторы в открытой функции, похоже, работают нормально. Если я добавлю следующее "открыть":
$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');
тогда я получаю кнопку "Удалить" с красным текстом. Это неплохо, но мне бы очень хотелось, чтобы этот маленький хлам мог справиться и с кнопкой "Удалить".
Edit:
Я сделал пару настроек к принятому ответу:
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 к ширине кнопки удерживает текст кнопки от упаковки на второй строке.