如何扩展jquery ui小部件？ （1.7） [英] How to extend a jquery ui widget ? (1.7)

问题描述

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

I would like to create a custom version of the sortable widget. I have been searching for documentation, but could not find something really accurate. The best information I found was : http://jqueryui.pbworks.com/Widget-factory.

我试过：

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

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

But $.widget.prototype._init is not the function I want to call I guess since it is the $.widget prototype.

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

Then, I tried something I read here and there :

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

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

但是：

• 我不敢相信我必须存储我想要覆盖的所有方法，它是如此丑陋。


• 它抛出错误（this.refresh不是函数），这意味着刷新方法不存在。这是否意味着我必须重新创建我想要覆盖的所有方法？在这种情况下扩展有什么意义？

我在这里遗漏了什么吗？

Am I missing something here ?

感谢您的帮助！

推荐答案

经过多次尝试，我终于找到了如何轻松完成这项工作：

After several tries, I finally found out how to do this easily :

$.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。[覆盖方法] .apply（this，arguments）;在每个覆盖方法中。

The key is to copy data from your custom widget to the original one. Don't forget to use $.ui.sortable.prototype.[overriden method].apply(this, arguments); in each overriden method.

Holly废话！

这篇关于如何扩展jquery ui小部件？ （1.7）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！