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.

A jQuery dialog showing buttons that have two different styles

The buttons are styled differently

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.

3 comments

[...] Check out the update to this post! [...]

by Advanced button theming on jQuery UI Dialog « geedew on May 12, 2012 at 9:16 am. #

Thaks a lot for this Awesome tutorials,its very useful.

by Kamal on August 22, 2013 at 4:15 pm. #

Color is working on mouse over on button only. But i need to before moreover event also.! Plz check …

by Shiva on January 21, 2014 at 8:28 am. #