如何使用 jquery-ui 选择菜单扩展方法（_renderItem、_renderMenu 等）

Question

JQuery-UI 选择菜单小部件具有一些扩展方法，可用于自定义下拉选择菜单的呈现/样式。 从 api docs 开始，可以使用以下小部件扩展方法来自定义菜单： - _renderItem（ul，项目） - _renderMenu(ul, items)

我想要实现的是，仅针对 selectmenu 小部件的一个实例覆盖上述扩展方法，而不是在全局级别。 widget factory docs 确实有关于扩展小部件特定实例的示例（示例在本页底部），但在将其应用于选择菜单扩展方法方面没有任何成功。 非常感谢您对此问题的任何见解。

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 在本文中自定义的自动完成小部件的方式： Customize the jQuery UI AutoComplete Drop Down Select Menu

Answer 2

而不是使用.data('ui-selectmenu') 来访问对象（如@kashif_shamaz 的回答中所建议的那样），API provides the instance() method 来公开对象。好处是此方法是 API 的一部分，因此与通过 data() 方法进行基于字符串的访问相比，在未来可能发生的变化期间应该更加稳定和更好地记录。

如下使用：

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

Answer 3

对于像我这样的 jQuery UI 新手，来自@tmpearce 的答案的扩展。对于<select> 输入元素：

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

必须先创建selectmenu 小部件，然后才能对其调用实例方法。您可以将实例的创建和访问链接在一起。

$( '#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/#method-instance