Question

我的应用程序中有大量的jquery-ui对话框。每次我需要一个新的，我写下以下几行：

$('.another-dialog').dialog({
  title: 'Another dialog',
  autoOpen: false,
  draggable: true,
  modal: true,
  show: 'fade',
  hide: 'fade',
  width: 400,
  position: ['center', 'center'],
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ],
  open: function(event, ui) { $(".ui-dialog-titlebar-close span").html('×') }
});

一个对话框之间唯一真正不同的是buttons和title个键。我想要的是JQuery对话框的应用程序范围设置，所以我只会调用

$('.another-dialog').dialog({
  title: 'Another dialog',
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ]
});

隐式设置所有需要的哈希键（我称之为“默认”设置）。

我知道我可以打.dialog()来打电话，比如.myDialog()打电话，我自己设置一切。但我想知道是否有一种真实，便捷的方法。

提前致谢！

Answer 1

如果要在不同的范围内使用公共选项，可以将公共选项放在变量中（或与文档关联的data）：

$(document).data("common-dialog-options", {
    autoOpen: false,
    draggable: true,
    modal: true,
    show: "fade",
    hide: "fade",
    width: 400,
    position: ["center", "center"],
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close span").html("×");
    }
});

然后，您可以使用$.extend()为每个对话框添加特定选项：

$(".another-dialog").dialog(
    $.extend({}, $(document).data("common-dialog-options"), {
        title: "Another dialog",
        buttons: [
            { text: "OK" },
            { text: "Cancel" }
        ]
    })
);

Answer 2

var defaultDialog = {
  title: 'Another dialog',
  autoOpen: false,
  draggable: true,
  modal: true,
  show: 'fade',
  hide: 'fade',
  width: 400,
  position: ['center', 'center'],
  buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ],
  open: function(event, ui) { $(".ui-dialog-titlebar-close span").html('×') }
};

var tunnedDialog= jQuery.extend(true, {}, defaultDialog );

tunnedDialog.title: 'Another dialog';
tunnedDialog.buttons: [
    { text: 'Ok' },
    { text: 'Cancel' }
  ]

$('.another-dialog').dialog(tunnedDialog);

JQuery UI对话框：应用程序范围的选项

2 个答案: