Question

我希望callingFunction能够覆盖showDivPopUp函数中提供的默认选项。

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

所以，上面的代码应该显示两个按钮即。 Yes和No而非OK。我不想if检查每个选项。

更新
在options参数中，可能存在未应用默认值的选项。因此，调用函数可以指定size函数中未提及的showDivPopUp选项。

Answer 1

您希望使用JQuery extend（）方法将传递给函数的选项与其中指定的默认值合并。

请参阅： http://www.zachstronaut.com/posts/2009/05/14/javascript-default-options-pattern.html 和 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); 
}

Answer 2

看起来'options'是JSON格式的。尝试省略showDivPopUp的第三个参数中的第一个{buttons:部分或者在showDivPopUp函数中设置buttons: options.buttons。

要对此进行扩展，请创建更多json对，并在showDivPopUp函数中测试它们的存在。存在？覆盖。不存在？保持默认值。

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

访问每个通道：

options.buttons
options.background
options.fontsize

使用以下方法测试存在：

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

回答问题中的更新：
使用jquery.each迭代传递选项中的所有元素。

Answer 3

在mgDiv.dialog函数中，修改buttons键以获得条件值。 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(); }
  });
}

允许调用函数覆盖默认选项 - jQuery UI对话框

3 个答案: