Making it easier to customize style of buttons in jQuery UI Dialog boxes
I wanted to add some styling and icons to the buttons inside a jquery UI Dialog boxes and this proved to be very difficult to figure out how to do.
As far as I can tell there's no good documentation on it, official or unofficial.
This post from filament didn't really help at all:
http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
I put together a solution with some things I found on stackoverflow, but this kind of thing should be much easier, and it should be documented, because there were several threads on that board showing people trying to do it also.
This code basically adds icons to a save and cancel button in a confirm dialog, and can be modified to do other styling:
- var buttons = $('.ui-dialog-buttonpane').children('button');
- buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');
-
- $(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
- $(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");
Again, this was a pain to figure out and should be covered in the dialog documentation.