2

JQuery-UI 选择菜单小部件有一些扩展方法，可用于自定义下拉选择菜单的呈现/样式。从api 文档中，可以使用以下小部件扩展方法来自定义菜单： - _renderItem( ul, item ) - _renderMenu( ul, items )

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

4

3 回答 3

2

啊，找到了使用扩展方法的方法。这是一个例子：

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

在本文中使用@Ben Olson 自定义自动完成小部件的方式： 自定义 jQuery UI 自动完成下拉选择菜单

于 2014-11-06T07:32:17.837 回答
2

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

使用如下：

$('#select-menu-id').selectmenu('instance')._renderItem = function(event, ui) {
    // override with custom logic for rendering each select option
}
于 2015-09-12T13:56:52.110 回答
0

对于像我这样的 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 )
{
  ...
};

视频：

于 2021-11-10T23:26:42.467 回答