我正在尝试编写一个插件，可以自动切换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);
答案 0 :(得分：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链接相矛盾。