Как расширить виджет jquery ui? (1.7)

Я хотел бы создать пользовательскую версию сортируемого виджета. Я искал документацию, но не мог найти что-то действительно точное. Наилучшей информацией я нашел: 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 не является функцией" ), что означает, что метод обновления не существует. Означает ли это, что мне придется воссоздать все методы, которые я хочу переопределить? В чем смысл расширения в этом случае?

Я что-то пропустил?

Спасибо за вашу помощь!

Ответы

Ответ 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. [Overriden method].apply(this, arguments); в каждом методе переопределения.

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Ответ 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 the item, that my point
        },
        stop: function (event, ui) {            
        },
        update: function (event, ui) {
            $.ajax(); //some ajax you might want to do
        }
    }
});

Ответ 5

Я не знаю, что вам нужно, когда вы говорите "продлить виджет". В моем случае я хотел изменить, как сам виджет выдал себя, и возиться с классами 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: как я могу настроить параметры подключаемого модуля Autocomplete?

Ответ 6

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

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