Advanced button theming on jQuery UI Dialog - Update

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.

[caption id=”attachment_346” align=”alignleft” width=”543” caption=”The buttons are styled differently”]A jQuery dialog showing buttons that have two different styles[/caption]

With the code you interact with your dialogs like this.
Initialize a dialog with the buttons option specified.

1
2
3
4
5
6
7
8
9
10
11
12
13
$( ".selector" ).dialog({
title: "Advanced Themeing"
,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.

1
2
3
4
5
6
7
8
9
10
//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.