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

Question

我有以下代码:

$('#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()

Answer 1

只需将其移动到一个函数中即可。如果您想要改变任何东西，请将其作为函数的参数。 (例如，您可以将 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);

或者如果像我一样你更喜欢你的函数 have names :

(function($) {
    $.fn.createCommonDialog = createCommonDialog;
    function createCommonDialog() {
        // ...

        return this;
    }
})(jQuery);

例如:

(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);

Live example