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.

A jQuery dialog showing buttons that have two different styles

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.