jquery ui - making dialogs more "dynamic" ?

Question

Hello,

I have a page that uses multiple dialogs for different things. Some dialogs may have buttons that others do not while other may need to be a different height than another... All of them have a set of params that will not change. My question, can I have a default like:

$('.someElement').dialog({
   width: 999,
   show: 'slide',
   hide: 'slide',
   ETC: 'some other option' 
}); 

and use it for all of my dialogs, then pass buttons or height to it dynamically when I open a dialog? It just seems wrong to have something like the above for every dialog I need...

Thanks!

Answer 1

You can use the "option" method (which takes an object, of the same format), like this:

$('.someElement').dialog({
   width: 999,
   show: 'slide',
   hide: 'slide',
   autoOpen: false
}); 
$('.someElement').dialog('option', {
  buttons: { "Ok": function() { $(this).dialog("close"); } },
  height: 400
}).dialog('open');

You can see a demo here, this just sets whatever options you want before calling the open method.

Answer 2

You could create a wrapper function for this:

function showDialog(target, options){
   options.width = 999;
   options.show = 'slide';
   options.hide = 'slide';

   $(target).dialog(options);
}

And then you would just call the function when you want to create a dialog. You could even get fancy and turn it into a jQuery plugin if you really want to...