5

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 dialog has square corners, rather than round ones. I was wondering if it's possible to have this set as default, so that I don't have to insert this code into every dialog config on the page.

I know I can edit the CSS, but it makes more sense to actually remove the class if it's not needed.

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
MAX POWER
  • 5,213
  • 15
  • 89
  • 141
  • What do you mean by 'set as default'? That would be editing the CSS. I see no need to employ JavaScript every time the dialog is opened when you can easily edit the CSS to remove the rounded corners. – j08691 Feb 15 '12 at 15:30
  • Might want to see this for a better answer: http://stackoverflow.com/questions/2287045/override-jqueryui-dialog-default-options – phazei Aug 28 '13 at 02:49

1 Answers1

9

I know it's not perfect, but you could define your own defaults object that contains your defaults. Then if you need to override or add to those defaults, you could 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... */
}));

Also remember that for the events, you can bind to them outside of the options object by using on (or its siblings delegate, bind, and live). You can apply that event handler to multiple dialogs by applying the same class to all of your dialogs, for example:

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

Just keep in mind that this event handler won't fire off for new dialogs. You could let the event bubble up the DOM to the body and attach the event handler there (this is the route I would go):

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

With this method of event delegation, you are applying your open function to all dialogs that will ever be appended to document.body.

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
  • What would be the syntax for using this default concept for various dialog property settings (did I say that right) as well? I've got a series of dialogs that all share about 10-12 common property settings and maintenance is becoming a chore. It'd be nice to only have to worry about the unique settings per dialog. – InteXX Sep 11 '14 at 05:35
  • OK, got it. Spoke too soon. I just added them as normal, before your open: call. I used [this](http://stackoverflow.com/questions/5409633/how-to-set-jquery-ui-dialog-defaults) as a reference. Works great, thanks. – InteXX Sep 11 '14 at 05:43