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.

回答1:

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); 
}

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/4756193/allow-calling-function-to-override-default-options-jquery-ui-dialog