Как использовать jquery-ui методы расширения selectmenu (_renderItem, _renderMenu и т. Д.)

Question

Виджет выбора меню JQuery-UI имеет несколько методов расширения, которые можно использовать для настройки рендеринга / оформления выпадающего меню выбора. Из документации API для настройки меню можно использовать следующие методы расширения виджетов: - _renderItem( ul, item) - _renderMenu( ul, items)

Чего я хочу добиться, так это переопределить вышеуказанные методы расширения только для одного экземпляра виджета selectmenu, а не на глобальном уровне. В документации по фабрике виджетов есть пример расширения конкретного экземпляра виджета (пример внизу этой страницы), но не удалось применить его к методам расширения selectmenu. Любое понимание этого вопроса высоко ценится.

Answer 1

Ах, нашел способ использовать методы расширения. Вот пример:

$('select-menu-id').selectmenu(options).data("ui-selectmenu")._renderItem = function(event, ui) {
  // override with custom logic for rendering each select option
}

Использовал способ настройки виджета автозаполнения @Ben Olson в этой статье: Настройка раскрывающегося меню выбора автозаполнения пользовательского интерфейса jQuery

Answer 2

Вместо того, чтобы использовать .data('ui-selectmenu') чтобы получить доступ к объекту (как предложено в ответе @kashif_shamaz), API предоставляет instance() способ выставить объект. Преимущество состоит в том, что этот метод является частью API и, следовательно, должен быть более стабильным и лучше документированным во время потенциальных будущих изменений по сравнению с основанным на строках доступом через data() метод.

Используйте следующим образом:

$('#select-menu-id').selectmenu('instance')._renderItem = function(event, ui) {
    // override with custom logic for rendering each select option
}

Answer 3

Для новичков в пользовательском интерфейсе jQuery, таких как я, расширение ответа от @tmpearce. Для <select>элемент ввода:

      <select id="foo">...</select>

Виджет должен быть создан до того, как вы сможете вызвать для него метод экземпляра. Вы можете объединить создание экземпляра и доступ к нему.

      $( '#foo' ).selectmenu().selectmenu( 'instance' )._renderItem = function( ul, item )
{
  ...
};

Или вы можете создать selectmenuвиджет, выполните другие действия, затем получите доступ к экземпляру.

      $( '#foo' ).selectmenu();

...

$( '#foo' ).selectmenu( 'instance' )._renderItem = function( ul, item )
{
  ...
};

Или, мой любимый вариант, сохранить экземпляр в переменной, чтобы мне не приходилось указывать селектор запроса более одного раза.

      var menu = $( "#foo" ).selectmenu().selectmenu( 'instance' );

...

menu._renderItem = function( ul, item )
{
  ...
};

Вид:

• https://api.jqueryui.com/selectmenu/#method-_renderItem
• https://api.jqueryui.com/selectmenu/#метод-экземпляр