jQuery Диалоговые Значки Кнопки UI
Действительно ли возможно добавить значки к кнопкам на Диалоговом окне UI jQuery? Я попытался делать его этот путь:
$("#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');
затем я действительно получаю кнопку Delete с красным текстом. Это не плохо, но я действительно хотел бы тот небольшой спрайт корзины на кнопке Delete также.
Править:
Я сделал пару тонких настроек к принятому ответу:
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 пкс к кнопке width мешает тексту кнопки переноситься на вторую строку.
4 ответа
Попробуйте эту строку, чтобы добавить значок корзины к кнопке удаления. Спрайт должен быть в отдельном элементе.
$('.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>');
назначить высоту ".ui-dialog .ui-button", как показано ниже:
.ui-dialog .ui-button {
height:36px;
}
.ui-icon-kl_exit {
height:32px;
width:32px;
display:block;
background-image: url('../icons/exit32.ico');
}
Я пробовал это, и это работает :)
[....]
open: function() {
$('.ui-dialog-buttonpane').
find('button:contains("Cancel")').button({
icons: {
primary: 'ui-icon-cancel'
}
});
[....]
Просто обновление, так как я столкнулся с необходимостью сделать это сам.
У меня есть несколько диалогов с одной и той же кнопкой закрытия, поэтому полезно поговорить о том, как разместить значки непосредственно в диалоговом окне, на которое вы хотите воздействовать, на случай, если вам понадобится значок на кнопке в другом диалог, содержащий тот же текст.
Также в выбранном решении фактически отсутствует пара уже определенных классов CSS, которые могли бы исправить позиционную проблему.
Следующий код должен выполнить именно то, что ожидалось в исходном вопросе, с немного большей точностью. Если вы хотите применить один и тот же значок корзины ко всем диалоговым окнам с помощью кнопки «Удалить», измените селектор $ ('# DeleteDialog'). Parent () на $ ('. Ui-dialog-buttonpane'), чтобы достичь этой цели:
$('#DeleteDialog').parent()
.find('button:contains("Delete")')
.removeClass('ui-button-text-only')
.addClass('ui-button-text-icon-primary ui-button-text-icon')
.prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');