如何扩展jquery ui小部件？(1.7)

Question

我想创建一个可排序小部件的自定义版本.我一直在寻找文档,但找不到真正准确的东西.我找到的最好的信息是:http://jqueryui.pbworks.com/Widget-factory.

我试过了 :

$.widget("ui.customsortable", $.extend($.ui.sortable, {
  _init: function() {
    $.widget.prototype._init.apply(this, arguments);
  }
}));

但$ .widget.prototype._init不是我想调用的函数我猜是因为它是$ .widget原型.

然后,我尝试了我在这里和那里读到的东西:

var _init = $.ui.sortable.prototype._init; 

$.widget("ui.customsortable", $.extend($.ui.sortable, {
  _init: function() {
    _init.apply(this, arguments);
  },
}));

但是:

• 我不敢相信我必须存储我想要覆盖的所有方法,它是如此丑陋.
• 它抛出一个错误("this.refresh不是函数"),这意味着刷新方法不存在.这是否意味着我必须重新创建我想要覆盖的所有方法？在这种情况下扩展有什么意义？

我在这里错过了什么吗？

谢谢你的帮助 !

Answer 1

这些都是有点奇怪的答案.有一个可选的第二个参数 - 要继承的basewidget.这很简单.无需使用原型等.

$.widget( "ui.customsortable", $.ui.sortable, {

  _init: function() {
    this.element.data('sortable', this.element.data('customsortable'));
    // or whatever you want
  }
} );

第二个参数是$ .ui.sortable.我认为这就是你所需要的.

Answer 2

经过几次尝试,我终于找到了如何轻松完成这项工作:

$.widget("ui.customsortable", $.extend({}, $.ui.sortable.prototype, {

  _init: function(){
    this.element.data('sortable', this.element.data('customsortable'));
    return $.ui.sortable.prototype._init.apply(this, arguments);
  }

  // Override other methods here.

}));

$.ui.customsortable.defaults = $.extend({}, $.ui.sortable.defaults);

关键是将数据从自定义窗口小部件复制到原始窗口小部件.不要忘记使用$ .ui.sortable.prototype.[overriden method] .apply(this,arguments); 在每个覆盖方法中.

天哪 !