JQuery UI Dialogs: application-wide options

Question

I have swarm of jquery-ui dialogs across my app. Every single time I need a new one, I write the following lines:

$('.another-dialog').dialog({
  title: 'Another dialog',
  autoOpen: false,
  draggable: true,
  modal: true,
  show: 'fade',
  hide: 'fade',
  width: 400,
  position: ['center', 'center'],
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ],
  open: function(event, ui) { $(".ui-dialog-titlebar-close span").html('×') }
});

The only things that are really differ between one dialog from another are the buttons and title keys. What I would like to have here is an application-wide setup for JQuery dialog, so the I would only call

$('.another-dialog').dialog({
  title: 'Another dialog',
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ]
});

with all the needed hash keys implicitly set up (i'd call it — "the default" setup).

I know I can wrap .dialog() call in, say, .myDialog() call where I'd set everything by myself. But I wonder if there's a true, convenient way of doing that.

Thanks in advance!

Answer 1

You can put the common options in a variable (or in the data associated with the document if you want to use them from different scopes):

$(document).data("common-dialog-options", {
    autoOpen: false,
    draggable: true,
    modal: true,
    show: "fade",
    hide: "fade",
    width: 400,
    position: ["center", "center"],
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close span").html("×");
    }
});

You can then use $.extend() to add the specific options for each dialog:

$(".another-dialog").dialog(
    $.extend({}, $(document).data("common-dialog-options"), {
        title: "Another dialog",
        buttons: [
            { text: "OK" },
            { text: "Cancel" }
        ]
    })
);