Advanced button theming on jQuery UI Dialog – Update
by drew on May 12, 2012
Since my previous post, jQueryUI has updated as well as jQuery itself. The code is largely the same, but they did implement some of the usefulness that I proposed. Essentially, they added the ability to pass the name of the button as text, rather then as the key to a key->value pair object.
With the code you interact with your dialogs like this.
Initialize a dialog with the buttons option specified.
$( ".selector" ).dialog({
title: "Advanced Theme`ing"
,buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); },
class: "on" // this is the added code!
},{
text: "Cancel",
click: function() { $(this).dialog("close"); },
class: "off" // this is the added code!
}
] });
Get or set the buttons option, after init.
//getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
//setter
$( ".selector" ).dialog( "option", "buttons", [
{
text: "Ok",
click: function() { $(this).dialog("close"); },
class: "submitting" // this is the added code!
}
] );
Passing a class will cause your button to inherit that class and then you can use that class to style it just like in my previous post.


One comment
[...] Check out the update to this post! [...]
by Advanced button theming on jQuery UI Dialog « geedew on May 12, 2012 at 9:16 am. #