jQuery Widget，如何将 jQuery 函数作为小部件选项传递

Question

我正在创建一个用于切换元素可见性的基本小部件。要初始化，该函数如下所示:

$('button').collapsable({
    target:'#targetID'
});

我希望能够传递一个 jquery 函数，例如:

$('button').collapsable({
    target:$(this).next();
});

简单的例子，重点是我希望能够根据需要传递更复杂的函数。我遇到的麻烦是如何在小部件中调用它来自行调用该函数。

例如(代码远程不正确)

toggle:function(){
    // i want it to firelike [this widget instances element].next();
    this.call[this.options.target]
}

但我不知道如何编写它来工作。任何想法表示赞赏。提前致谢!

Answer 1

正如@cwolves所说，您需要传递函数引用。您可以实现一些逻辑来确定您正在查看的是函数还是选择器，并采取适当的行动:

(function($) {
    $.fn.collapsible = function(options) {
        var self = this;
        var toggle = function () {
            /* options.target is a selector: */
            if (typeof options.target === "string") {
                $(options.target).toggle();
            } else if (typeof options.target === "function") {
                $(options.target.call(this)).toggle();
            }
        };

        this.click(toggle);
    };
})(jQuery);

然后你可以像这样使用它:

$("#button").collapsible({
    target: "#foobar"
});

$("#button2").collapsible({
    target: function () {
        console.dir(this);
        return $(this).next();
    }
});

示例: http://jsfiddle.net/LVsys/