Payday loans

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.

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. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.