JQuery UI 对话框 : application-wide options

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

一个对话框与另一个对话框之间唯一真正不同的是按钮和标题键。我想要的是 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" }
        ]
    })
);