JQuery-插件，让用户运行在插件中自定义功能

Question

我是 JQuery-Plugins 的新手，我尝试制作一个插件，它采用用户编写的函数并希望在我的插件的特定部分调用它。可悲的是，我真的不知道要寻找什么，到目前为止我发现的所有 turoials 似乎都没有给我我正在寻找的答案。

我有以下 JQuery-Plugin

的代码

$.fn.plugin = function( options ) {
    var settings = $.extend({
        //FUNCTION MIGHT GO IN HERE?
    }, options );

    this.each(function() {

        $(this).click(function(){
            //RUN FUNCTION USER DEFINES ON CALL
        });

    return this;
};

而且我希望用户能够这样调用它：（它很可能会以其他方式调用，这段代码正是我想象的样子，以便更容易理解我想要实现的目标。

$("p").plugin(doStuff("foo"));    
function doStuff(param1){
    console.log(param1);
}

预先感谢您的帮助。

Answer 1

回调函数应该在其中一个选项中。我们称它为 onClick.

$.fn.plugin = function( options ) {
    var settings = $.extend({
        onClick: function() {
            console.log("default");
        }
    }, options );

    this.each(function() {
        $(this).click(function(){
            settings.onClick();
        });

    return this;
};

然后您将通过提供一个函数来初始化插件：

$("p").plugin({
    onClick: function() {
        doStuff("foo");
    }
});

JQuery-插件，让用户运行在插件中自定义功能

JQuery-Plugin, let user run custom function in plugin

jquery

function

jquery-plugins