0

我正在尝试编写一个插件来自动切换 jQuery 中面板的内容。如果我不需要在我的插件中定义的外部调用具有初始化设置的指定元素的函数，那么一切正常。我被困在这种情况下。举个例子；我有一个名为“toggle(domEle)”的函数获取一个元素作为参数，如果打开则将其关闭，否则打开。在这个函数内部，它调用了另外两个函数，名为“toggleOff(domEle)”和“toggleOn(domEle)”。我想在外部调用这些函数中的任何一个。因为我想对面板进行分组并确保同时只有一个“在”组中。所以我得到了所有的组，但不能为他们调用“toggleOff”方法。

$("#someElement").togglePanel({options}); // initialize the plugin.

//Now it works fine with binded trigger events passed in options.
//But i want to call toggling functions externally like this or somehow:

$("#someElement").togglePanel().toggleOff();
//Or
$("#someElement").togglePanel.toggleOff();
//Or how it must be.

这是我的完整代码。我希望我能解释我的问题。

//Toggle Panel
(function ($) {
    var methods = {
        //init method
        init: function (domEle, settings) {
            if (!methods.getSettings(domEle)) {
                switch (settings.position) {
                    case "top":
                        $(domEle).css("margin-top", settings.margin);
                        break;
                    case "bottom":
                        $(domEle).css("margin-bottom", settings.margin);
                        break;
                    case "left":
                        $(domEle).css("margin-left", settings.margin);
                        break;
                    case "right":
                        $(domEle).css("margin-right", settings.margin);
                        break;
                }
                $(domEle).css("position", "absolute");
                $(domEle).css("z-index", settings.zindex);
                methods.setToggleStatus(domEle, "on");
                methods.setToggleGroup(domEle, settings.toggleGroup);
                $(settings.triggers).each(function (index, elem) {
                    $(elem.selector).bind(elem.eventName, function (e) {
                        methods.toggle(domEle);
                    });
                });
                methods.setSettings(domEle, settings);
                methods.toggleOff(domEle, false);
            }
        },
        //toggle method
        toggle: function (domEle) {
            if (methods.getAnimatingStatus(domEle) == "true") return;
            if (methods.getToggleStatus(domEle) == "on") {
                methods.toggleOff(domEle);
            }
            else {
                methods.toggleOn(domEle);
            }
        },
        //toggleOn method
        toggleOn: function (domEle, useAnimation) {
            if (methods.getAnimatingStatus(domEle) == "true") return;
            var settings = methods.getSettings(domEle);
            useAnimation = typeof useAnimation !== 'undefined' ? useAnimation : settings.useAnimation;
            if (methods.getToggleStatus(domEle) == "off") {
                if (useAnimation) {
                    methods.toggleStart(domEle);
                    switch (settings.position) {
                        case "top":
                            $(domEle).animate({ top: 0 }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                        case "bottom":
                            $(domEle).animate({ bottom: 0 }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                        case "left":
                            $(domEle).animate({ left: 0 }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                        case "right":
                            $(domEle).animate({ right: 0 }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                    }
                }
                else {
                    switch (settings.position) {
                        case "top":
                            $(domEle).css({ top: 0 });
                            break;
                        case "bottom":
                            $(domEle).css({ bottom: 0 });
                            break;
                        case "left":
                            $(domEle).css({ left: 0 });
                            break;
                        case "right":
                            $(domEle).css({ right: 0 });
                            break;
                    }
                }
                methods.setToggleStatus(domEle, "on");
            }
        },
        //toggleOff method
        toggleOff: function (domEle, useAnimation) {
            if (methods.getAnimatingStatus(domEle) == "true") return;
            var settings = methods.getSettings(domEle);
            useAnimation = typeof useAnimation !== 'undefined' ? useAnimation : settings.useAnimation;
            var width = $(domEle).width();
            var height = $(domEle).height();
            if (methods.getToggleStatus(domEle) == "on") {
                if (useAnimation) {
                    methods.toggleStart(domEle);
                    switch (settings.position) {
                        case "top":
                            $(domEle).animate({ top: -height }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                        case "bottom":
                            $(domEle).animate({ bottom: -height }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                        case "left":
                            $(domEle).animate({ left: -width }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                        case "right":
                            $(domEle).animate({ right: -width }, settings.animDuration, null, function () { methods.toggleComplete(domEle); });
                            break;
                    }
                }
                else {
                    switch (settings.position) {
                        case "top":
                            $(domEle).css({ top: -height });
                            break;
                        case "bottom":
                            $(domEle).css({ bottom: -height });
                            break;
                        case "left":
                            $(domEle).css({ left: -width });
                            break;
                        case "right":
                            $(domEle).css({ right: -width });
                            break;
                    }
                }
                methods.setToggleStatus(domEle, "off");
            }
        },
        //toggleStart
        toggleStart: function (domEle) {
            methods.setAnimatingStatus(domEle, true);
            methods.getSettings(domEle).toggleStart();
        },
        //toggleComplete
        toggleComplete: function (domEle) {
            methods.setAnimatingStatus(domEle, false);
            methods.getSettings(domEle).toggleComplete();
        },
        //getToggleStatus method
        getToggleStatus: function (domEle) { return $(domEle).attr("toggleStatus"); },
        //setToggleStatus method
        setToggleStatus: function (domEle, status) { $(domEle).attr("toggleStatus", status); },
        //getToggleGroup method
        getToggleGroup: function (domEle) { return $(domEle).attr("toggleGroup"); },
        //setToggleGroup method
        setToggleGroup: function (domEle, group) { $(domEle).attr("toggleGroup", group); },
        //getAnimatingStatus
        getAnimatingStatus: function (domEle) { return $(domEle).attr("isAnimating"); },
        //setAnimatingStatus
        setAnimatingStatus: function (domEle, status) { $(domEle).attr("isAnimating", status); },
        //getSettings
        getSettings: function (domEle) { return jQuery(domEle).data("settings"); },
        //setSettings
        setSettings: function (domEle, settings) { jQuery(domEle).data("settings", settings); }
    }

    jQuery.fn.togglePanel = function (options) {
        jQuery.fn.togglePanel.toggleOff = function () { methods.toggleOff($(this)); };
        jQuery.fn.togglePanel.toggleOn = function () { methods.toggleOn($(this)); };
        jQuery.fn.togglePanel.toggle = function () { methods.toggle($(this)); };
        jQuery.fn.togglePanel.defaults = {
            position: "top",
            margin: 0,
            zindex: -1,
            useAnimation: true,
            animDuration: 400,
            triggers: {},
            toggleStart: function () { },
            toggleComplete: function () { },
            toggleGroup: "_none_"
        };
        var $this = $(this);
        var settings = jQuery.extend(jQuery.fn.togglePanel.defaults, options);
        methods.init($this, settings);
    };
})(jQuery);
4

1 回答 1

1

你应该做这样的事情

var methods = {
    toggleOn: ...,
    toggleOff: ...,
    init: function(obj) {
        ...
    }
}

$.fn.togglePanel= function( method ) {    
  if ( methods[method] ) {
    return methods[method].apply( 
     this, Array.prototype.slice.call( arguments, 1 )
    );
  } else if ( typeof method === 'object' || ! method ) {
    return methods.init.apply( this, arguments );
  } else {
    $.error( 'Method ' +  method + ' does not exist' );
  }      
};

所以你可以通过.togglePanel('toggleOff')

您的尝试将与通常的 jQuery 链接相矛盾。

于 2012-09-11T11:23:04.593 回答