jQuery.ui dialog: adding classe to buttons

Had this question come up at work and found a good answer on stackoverflow here. It basically involves handling the open event, finding the buttons and applying a style to them.

Firstly a simple bit of html:

<a id="to_dialog_a" href="javascript:void(0);">click me</a>
<div id="to_dialog" style="border: 1px solid gold; background-color: #336699"></div>

And here is some javascript to wire it up. In the example below I have done things a little differently as the application we are developing needs to be localized; so i used the button index.

Note: This example doesn’t have any jquery.ui css to deal with.

A whole example html file is located here

        $(document).ready(function() {
            $("#to_dialog_a").click(function() {
                $("#to_dialog").dialog("open");
            });
            $("#to_dialog").dialog({
                autoOpen: false,
                buttons : {
                    ok: function() {
                        alert("you clicked me!");
                    },
                    what: function() {
                        alert("you clicked me!");
                    },
                    cancel: function() {
                        alert("you clicked me!");
                    }
                }
                ,
                open: function(event, ui) {
                    // Get the dialog
                    var dialog = $(event.target).parents(".ui-dialog.ui-widget");

                    // Get the buttons
                    var buttons = dialog.find(".ui-dialog-buttonpane").find("button");

                    var okButton = buttons[0];
                    var whatButton = buttons[1];
                    var cancelButton = buttons[2];

                    // Add class to the buttons
                    // Add class to the buttons
                    $(okButton).addClass("primary");
                    $(whatButton).addClass("secondary");
                    $(cancelButton).addClass("thirdary");
                }
            });
        });

About these ads

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: