Javascript 如何将对话框的创建移动到jQuery UI中的外部函数中？

我有以下代码：

$('#commonDialog').dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            draggable: true,
            height: 'auto',
            width: 875,
            buttons: {
                "Submit": function () {
                    tinyMCE.triggerSave();
                    $("#update-message").html('');
                    $("#menuForm").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            },
            open: function (event, ui) {
                tinyMCE.init(window.tinyMCEOptions);
                $('.ui-dialog-buttonpane').
                    find('button:contains("Submit")').button({ icons: { primary: 'ui-icon-plus'} });
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({ icons: { primary: 'ui-icon-cancel'} });
                $(":input[type='checkbox']").wijcheckbox();
                $("#dialog_type").wijdropdown();
                $("#dialog_select").wijdropdown();
                $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
            }
        });

现在代码在我的网页上，但我想在另一个网页上使用相同的代码。如何将所有这些代码移到另一个函数中，以便将其放入外部文件并共享

理想情况下，我希望在每页上都有以下内容：

$('#commonDialog').createCommonDialog()

---

把它移到函数中。如果需要更改任何内容，请将其作为函数的参数。（例如，您可以将

tinyMCE

作为一个参数，这样它就不必是单独的文件和页面共享的全局文件。或者，如果它总是存在的话，也不必是全局文件。）

如果您真的希望在最后使用语法，可以添加到

$.fn

，这就是插件的功能。因此：

(function($) {
    $.fn.createCommonDialog = function() {
        // your code here, `this` will be a jQuery instance around
        // whatever the current matched set of elements is.
        // (Note that that's different from `this` in event handlers,
        // which is a raw DOM element.)

        // Unless you have a really good reason not to, return `this`
        // at the end, so your function can be part of a chain
        return this;
    };
})(jQuery);

或者，如果像我一样，您更喜欢您的功能：

例如：

---

只需将其移动到函数中即可。如果需要更改任何内容，请将其作为函数的参数。（例如，您可以将

tinyMCE

作为一个参数，这样它就不必是单独的文件和页面共享的全局文件。或者，如果它总是存在的话，也不必是全局文件。）

如果您真的希望在最后使用语法，可以添加到

$.fn

，这就是插件的功能。因此：

(function($) {
    $.fn.createCommonDialog = function() {
        // your code here, `this` will be a jQuery instance around
        // whatever the current matched set of elements is.
        // (Note that that's different from `this` in event handlers,
        // which is a raw DOM element.)

        // Unless you have a really good reason not to, return `this`
        // at the end, so your function can be part of a chain
        return this;
    };
})(jQuery);

或者，如果像我一样，您更喜欢您的功能：

例如：

---

看起来您需要一个jQuery插件。你可以做的是去抓取模板，并根据你的需求定制它。另一方面，你们知道jquerycolorbox插件吗？我认为这个插件涵盖了你需要的所有东西。看起来你需要一个jQuery插件。你可以做的是去抓取模板，并根据你的需求定制它。另一方面，你们知道jquerycolorbox插件吗？我认为这个插件涵盖了所有你需要的东西。

(function($) {
    $.fn.createCommonDialog = createCommonDialog;
    function createCommonDialog() {
        this.dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            draggable: true,
            height: 'auto',
            width: 875,
            buttons: {
                "Submit": function () {
                    tinyMCE.triggerSave();
                    $("#update-message").html('');
                    $("#menuForm").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            },
            open: function (event, ui) {
                tinyMCE.init(window.tinyMCEOptions);
                $('.ui-dialog-buttonpane').
                    find('button:contains("Submit")').button({ icons: { primary: 'ui-icon-plus'} });
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({ icons: { primary: 'ui-icon-cancel'} });
                $(":input[type='checkbox']").wijcheckbox();
                $("#dialog_type").wijdropdown();
                $("#dialog_select").wijdropdown();
                $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
            }
        });

        return this;
    }
})(jQuery);