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");
                }
            });
        });

Disabling selection of a section

Found this little gem while trying to prevent selection behind the jQuery.treeview controll.

onselectstart="return false;" style="-moz-user-select: none;"

This worked for me on Chrome, IE 8, and FireFox 3.6.

Found this tidbit here.

Update: 2010-07-05 – Found this interesting extension to jQuery also. Note the replies also as they may be of use.

Turn TextArea Resize off on Google Chrome

Very simple… To turn this off just go:

textarea {resize: none}

Clearfix Hack

Found this at PerisablePress.com.

/* 
    Clearfix hack
*/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Less CSS

Less CSS Website – Ruby

http://lesscss.org/

.Less Port of Ruby version

http://www.dotlesscss.com/

T4 Template for Less CSS

http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

CSS Reset Stylesheets

Here are two reset stylesheets that I’ve found recently: