问题
The JQuery-UI selectmenu widget has some extension methods that can be used to customize rendering/styling of the dropdown select menu. From the api docs , the following widget extension methods can be used to customize the menu: - _renderItem( ul, item ) - _renderMenu( ul, items )
What i want to achieve is, overriding the above extension methods for just one instance of the selectmenu widget, and not at a global level. The widget factory docs does have example about extending a particular instance of a widget(example is at the bottom of this page), but haven't had any success in applying that to the selectmenu extension methods. Any insight for this issue is much appreciated.
回答1:
Ah, found the way to use the extension methods. Here is an example:
$('select-menu-id').selectmenu(options).data("ui-selectmenu")._renderItem = function(event, ui) {
// override with custom logic for rendering each select option
}
Used the way autocomplete widget was customized by @Ben Olson in this article: Customize the jQuery UI AutoComplete Drop Down Select Menu
回答2:
Rather than use .data('ui-selectmenu') to gain access to the object (as suggested in the answer by @kashif_shamaz), the API provides the instance() method to expose the object. The benefit is that this method is part of the API, and thus should be more stable and better-documented during potential future changes, compared to string-based access via the data() method.
Use as follows:
$('#select-menu-id').selectmenu('instance')._renderItem = function(event, ui) {
// override with custom logic for rendering each select option
}
来源：https://stackoverflow.com/questions/26773621/how-to-use-jquery-ui-selectmenu-extension-methods-renderitem-rendermenu-etc