JQuery UI Dialogs: Application Variations

Question

I have a swarm of jquery-ui dialogs in my application. Every 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 thing that really differs between one dialog from another is the buttons and title . What I would like to have here is a system-wide setting for the jQuery dialog, so I would only name

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

with all the necessary hash keys implicitly configured (I would call this the "default setting").

I know that I can enclose a .dialog() call, say, .myDialog() , where I myself would put everything. But I wonder if there is a correct, convenient way to do this.

Thanks in advance!

Answer 1

You can put the general parameters in a variable (or in the data associated with the document if you want to use them from different sights):

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

Then you can use $. extend () to add specific parameters for each dialog:

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

Answer 2

 var defaultDialog = { 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('×') } }; var tunnedDialog= jQuery.extend(true, {}, defaultDialog ); tunnedDialog.title: 'Another dialog'; tunnedDialog.buttons: [ { text: 'Ok' }, { text: 'Cancel' } ] $('.another-dialog').dialog(tunnedDialog);