JQuery UI Dialog - default configuration setting

Question

I have several jQuery UI Dialogs handlers, all of which contain the following:

open: function(event, ui) {
      $(".ui-dialog-titlebar").removeClass("ui-corner-all");
      $(".ui-dialog").removeClass("ui-corner-all");
},

This is so that the dialogue has square corners, not round. I was wondering if this set can be installed by default, so I don’t need to embed this code in every configuration dialog on the page.

I know that I can edit CSS, but it makes sense to actually delete the class if it is not needed.

Answer 1

I know this is not ideal, but you can define your own object defaultsthat contains your default values. Then, if you need to override or add these default values, you can use $.extend:

var dialogDefaults = {
    open: function (event, ui) {
        $(".ui-dialog-titlebar").removeClass("ui-corner-all");
        $(".ui-dialog").removeClass("ui-corner-all");
    }
};
// then later on:
$("#foo").dialog($.extend({ }, dialogDefaults, {
    autoOpen: false,
    width: 500,
    /* etc... */
}));

, options, on ( delegate, bind live). , , :

$("div.my-dialog-class").on("dialogopen", function (event, ui) {
    $(".ui-dialog-titlebar").removeClass("ui-corner-all");
    $(".ui-dialog").removeClass("ui-corner-all");
});

, . DOM body ( , ):

$(document.body).on("dialogopen", "div.my-dialog-class", function (event, ui) {
    $(".ui-dialog-titlebar").removeClass("ui-corner-all");
    $(".ui-dialog").removeClass("ui-corner-all");
});

open , document.body.