0

jQueryでパネルのトグルを自動化するプラグインを作成しようとしています。初期化された設定で指定された要素に対して、プラグインで定義された関数を外部で呼び出す必要がない場合、すべてが正常に機能します。私はこのケースで立ち往生しています。例を挙げると、「toggle(domEle)」という名前の関数は、パラメーターとして要素を取得し、オンの場合はオフに切り替え、そうでない場合はオンに切り替えます。この関数内で、「toggleOff(domEle)」と「toggleOn(domEle)」という名前の 2 つの他の関数を呼び出します。これらの関数のいずれかを外部から呼び出したい。パネルをグループ化し、同時にグループの 1 つだけが「オン」になるようにしたいためです。だから私はすべてのグループを取得しますが、それらに対して「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 に答える