如何扩展 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 is not a function")，这意味着 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.[overriden method].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.

胡说八道！

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