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

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

您可以将公共选项放在变量中(或者如果要在不同的范围内使用它们,则将其放在与文档关联的数据中):

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