Allow calling function to override default options - jQuery UI dialog

I want the callingFunction to be able to override the default options provided in the showDivPopUp function.

function calling(){
  showDivPopUp("title of pop up box", "message to show", 
        {
            buttons:{
                        Yes: function () {
                                $(this).dialog("destroy");
                            },
                        No :function () {
                                $(this).dialog("destroy");
                            }                        
                    }      
        });
}

function showDivPopUp(title,msg,options){
  var mgDiv = $("#msgDiv");
  mgDiv.attr("innerHTML", msg);
  return mgDiv.dialog({
    modal: true,
    开发者_开发百科buttons: {
      Ok: function () {
        $(this).dialog("destroy");
      }
    },
    resizable: true,
    show: "explode",
    position: "center",
    closeOnEscape: true,
    draggable: false,
    title : titl,
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
  });
}

So, the above code should show two buttons viz. Yes and No instead of just OK. I don't want to do if check for each option.

UPDATE:

In options parameter there might be options for which default is not applied. So the calling function may specify size option which is not mentioned in the showDivPopUp function.

You want to use the JQuery extend() method to merge the options you pass into the function with the defaults that are specified within it.

See: http://www.zachstronaut.com/posts/2009/05/14/javascript-default-options-pattern.html and http://api.jquery.com/jQuery.extend/

//calling function source excluded, use exactly the same.

function showDivPopUp(title, msg, options) {

    //create basic default options
    var defaults = {
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog("destroy");
            }
        },
        resizable: true,
        show: "explode",
        position: "center",
        closeOnEscape: true,
        draggable: false,
        title: title,
        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
    }

    //merge the specified options with the defaults.
    //in example case, will have the above except with the new buttons specified
    if (typeof options == 'object') {
        options = $.extend(defaults, options);
    } else {
        options = defaults;
    }


    var mgDiv = $("#msgDiv");
    mgDiv.attr("innerHTML", msg);
    return mgDiv.dialog(options); 
}

Looks like 'options' is in JSON format. Try omitting the first {buttons: portion in the 3rd argument to showDivPopUp or set buttons: options.buttons in the showDivPopUp function.

To expand on this, create more json pairs, and test for their existence in the showDivPopUp function. Exists? Override. Doesn't exist? Keep defaults.

{buttons:{
  Yes: function () {
    $(this).dialog("destroy");
  },
  No :function () {
    $(this).dialog("destroy");
  }                        
},
background:"blue",
fontsize:15
}

Access each via:

options.buttons
options.background
options.fontsize

Test for existence using:

if ( typeof( window[ 'option.fontsize' ] ) != "undefined" ) {override code}

Response to the update in the question:
Use jquery.each to iterate over all elements in the passed option.

In your mgDiv.dialog function, modify the buttons key to have a conditional value. E.g.:

function showDivPopUp(title,msg,options){
  var mgDiv = $("#msgDiv");
  mgDiv.attr("innerHTML", msg);
  return mgDiv.dialog({
    modal: true,
    buttons: options.buttons || {
      Ok: function () {
        $(this).dialog("destroy");
      }
    },
    resizable: true,
    show: "explode",
    position: "center",
    closeOnEscape: true,
    draggable: false,
    title : titl,
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
  });
}