Is it possible to add icons to the buttons on a jQuery UI Dialog? I've tried doing it this way:
$("#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');
}
});
The selectors in the open function seem to be working fine. If I add the following to "open":
$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');
then I do get a Delete button with red text. That's not bad, but I'd really like that little trash can sprite on the Delete button as well.
Edit:
I made a pair of tweaks to the accepted answer:
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);
Adding some top margin pushes the icon down, so it looks like it's centred vertically. Adding 25 px to the button's width keeps the button text from wrapping onto a second line.
i' tried this, and it works :)
[....]
open: function() {
$('.ui-dialog-buttonpane').
find('button:contains("Cancel")').button({
icons: {
primary: 'ui-icon-cancel'
}
});
[....]
Starting from jQuery UI version 1.10.0, it is possible to cleanly specify button icons without resorting to open
event handlers. The syntax is:
buttons: [
{
text: "OK",
icons: { primary: "ui-icon-check" }
},
{
text: "Cancel",
icons: { primary: "ui-icon-closethick" }
}
]
It is also possible to specify a secondary
icon.
See it in action.
Try this line to add the trash icon to the delete button. The sprite has to be in a separate element.
$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');
In order to prevent the icon from appearing on the top of the button:
$('.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>');
also you can add id or other attr to button, like this:
buttons:[
{
text: "Close",
id: "closebtn",
click: function() { $(this).dialog("close"); }
}
],
open: function() {
$("#closebtn").button({ icons: { primary: "ui-icon-close" } });
}
This version works without having to worry about the text in the buttons
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' }
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With