javascript - 向 jquery 小部件添加回调

Question

我想向 jquery 小部件添加回调。

例如，我看到可拖动小部件中的回调都包含在以下内容中:

$.ui.plugin.add("draggable", "connectToSortable", {
// callbacks in here
})

这是否意味着我还必须将我的回调包装在这个 $.ui.plugin.add({}); 中少量？还有另一种方法吗？比如，我能否在小部件选项中有一个函数来处理这个问题，这样调用我的网格看起来就很模糊:

var foo = {
    LoadIt: function(url, formid){
        var bar = '',
        $('#baz').grid({
            title: {somevar : true},
            rowcontent: {data: setup and populate rows},
            onComplete: function(){
                //mycallback could go here
            }
        });
    }
}, // another grid loader, etc.

在我的例子中，我使用的是网格。网格通过 ajax 调用加载一些 json 数据，然后，既然 dom 填充了网格，我想对其进行一些操作(例如，在悬停时添加背景颜色)。所以我想象能够调用作为网格的一部分:

onComplete : function(){//add my background color on hover here};

关于如何向 jquery 小部件添加回调的任何提示或建议？

我发现的一个让我感到困惑的例子:

var Green5 = {
    setLevel: function(x){
        //...
        this.element.css({background: greenlevels[level]});
        var callback = this.options.change;
        if ($.isFunction(callback)) callback(level);
    },
    // ... rest of widget definition
};
$.widget("ui.green5", Green5);

$('.target').green5({change: function(x) { alert ("The color changed to "+x); } });

在解释如何向 jquery 小部件添加回调的网站上找到这个，但我没有看到任何关于 $.ui.plugin.add 位的信息，也没有看到如何 change 正在传递到 setLevel。 setLevel 如何获取change 中的函数？如果只是传递给 green5 的任何东西都是一个选项，因此可以通过 this.options 访问，那么 callback 方法在哪里调用 level in if ( $.isFunction(callback)) callback(level); 从哪里来？我很困惑。 :(

Answer 1

在示例(找到 here)中，作者指出我们可以像传递任何其他选项一样传递回调。如果我们像这样重写他调用小部件的方式可能会更清楚:

var options = {
    change: function(x){ alert("The color changed to "+x);}
}
$('.target').green5(options);

它所做的是将“更改”选项与一个匿名函数绑定(bind)，该函数接受一个变量并提醒用户颜色已更改为该变量。因此，调用

var callback = this.options.change;

检索作为“更改”选项传递的匿名函数并将其分配给变量callback。线路

if ($.isFunction(callback)) callback(level);

简单地检查回调是否确实是一个函数。它正在检查空值/不正确传递的参数。如果传入 options.change 的回调实际上是一个函数，我们将使用参数“level”调用它。

ui.plugin.add() 不需要使用，除非我们从外部修改插件(参见示例 here)。