如何扩展 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 is not a function”），这意味着刷新方法不存在。这是否意味着我必须重新创建我想要覆盖的所有方法？在这种情况下扩展有什么意义？

我在这里错过了什么吗？

感谢您的帮助！

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);在每个被覆盖的方法中。

冬青废话！

Answer 3

关于上面选择的解决方案：

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

如果您将一个对象选项扩展到另一个对象，true 的 [deep] 标志将为您提供所需的结果。

Answer 4

我使用它来预定义启动、停止和更新功能：

$.widget('ui.custom_sortable_or_any_other_name', $.ui.sortable, {
    _init: function() {
        this.element.children().css('position', 'relative'); //for example
    },
    options : {
        start: function (event, ui) {   
            ui.item.addClass('noclick'); //ui.item get's the item, that's my point
        },
        stop: function (event, ui) {            
        },
        update: function (event, ui) {
            $.ajax(); //some ajax you might want to do
        }
    }
});

Answer 5

当您说“扩展小部件”时，我不知道您在追求什么。在我的例子中，我想改变小部件的呈现方式，并且摆弄 CSS 类并不令人满意。这不是扩展小部件的行为，而是修改小部件的行为。

所以我重写了渲染方法。有问题的小部件是the jQueryUI autocomplete，覆盖看起来像这样：

function monkeyPatchAutocomplete() {  

  // don't really need this, but in case I did, I could store it and chain  
  var oldFn = $.ui.autocomplete.prototype._renderItem;  

  $.ui.autocomplete.prototype._renderItem = function( ul, item) {  
     // whatever 
  };  
}  

我刚刚打电话给$(document).ready()。

---

相关：
- Can I replace or modify a function on a jQuery UI widget? How?
- jQueryUI: how can I custom-format the Autocomplete plug-in results?

Answer 6

我用过一次：

$.ui.buttonset.prototype.value = function() {
     return this.element.find('#' + this.element.find('label[aria-pressed="true"]').attr('for')).val();
}