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

E.g：

(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

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

1 个答案: