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

霍莉废话！

Answer 3

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

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

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

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类不满足。这不是扩展窗口小部件行为的情况，而是修改窗口小部件的行为。

所以我过度使用了render方法。有问题的小部件是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()中调用了它。

如何扩展jquery ui小部件？（1.7）

6 个答案:

如何扩展jquery ui小部件？ （1.7）

6 个答案:

如何扩展jquery ui小部件？（1.7）