Как расширить виджет 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

После нескольких попыток я наконец понял, как это легко сделать:

$.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); в каждом переопределенном методе.

Охренеть!

Answer 2

Это довольно странные ответы. Существует необязательный второй параметр - basewidget для наследования. Это просто. Не нужно работать с прототипом и так далее.

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

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

Второй параметр - $.ui.sortable. Я думаю, что это все, что вам нужно.

Answer 3

Я использую это для того, чтобы заранее определить функции запуска, остановки и обновления:

$.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 4

Относительно выбранного решения выше:

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

Если вы расширяете опции одного объекта в другой, флаг [deep] true даст вам желаемые результаты.

Answer 5

Я использовал это один раз:

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

Answer 6

Я не знаю только, что вы ищете, когда вы говорите "расширить виджет". В моем случае я хотел изменить способ отображения самого виджета, и работа с классами CSS не удовлетворяла. Это был не случай расширения поведения виджета, а скорее изменение поведения виджета.

Поэтому я перевернул метод рендеринга. Рассматриваемый виджет был автозаполнением jQueryUI, и переопределение выглядело так:

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? Как?
- jQueryUI: как мне отформатировать результаты плагина автозаполнения?