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

Это довольно странные ответы. Существует необязательный второй параметр - 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. [Переопределенный метод] .apply (this, arguments); в каждом переопределенном методе.

Холли дерьмо!

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