允许调用函数覆盖默认选项 - jQuery UI对话框 [英] Allow calling function to override default options - jQuery UI dialog

问题描述

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

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.

更新：

在options参数中，可能存在未应用默认值的选项。所以调用函数可以指定 size 选项，这在 showDivPopUp 函数中没有提到。

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.

推荐答案

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

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.

请参阅：
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); 
}

这篇关于允许调用函数覆盖默认选项 - jQuery UI对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！