jQuery Ui Dialog Buttons, How to add class?
You Can add class to the button's in Dialog...by
$('#mydialog').dialog({
buttons:{
"send":{
text:'Send',
'class':'save'
},
"cancel":{
text:'Cancel',
'class':'cancel'
}
});
I think this will work for you. and you can find more answers here.
It doesn't look like there's a great way to do this via the API, however you could add the classes in an event handler for create
:
$("#dialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
},
create:function () {
$(this).closest(".ui-dialog")
.find(".ui-button:first") // the first button
.addClass("custom");
}
});
If you wanted the second button, you could use:
$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button
The key is the $(this).closest(".ui-dialog").find(".ui-button")
, which will select the buttons in your dialog. After that, you could apply any selector you want (including :contains(...)
which might be useful if you want to select a button based on its text instead of its order).
Here's an example: http://jsfiddle.net/jjdtG/
Also note that the CSS selector for the style(s) you want to apply has to be more specific than jQueryUI's built-in selectors in order for the styling to be applied.
Hope it will help !
$("#mydialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
"Cancel": {
click: function () {
$(this).dialog("close");
},
text: 'Cancel',
class: 'custom-class'
}
}
});
Use the open event handler:
open: function(event) {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
}
Clean, simple, piece of cake!