Question

Im using an existing widget from the jquery-ui labs call selectmenu. It has callback options for the events close and open. The problem is i need in these event to animate a node that is part of the widget but not what its connected to. In order to do this i need access to this node.

for example if i were to actually modify the widget code itself:

// ... other methods/properties

"open" : function(event){
    // ... the original logic

    // this is my animation
    $(this.list).slideUp('slow'); 

    // this is the orginal call to _trigger
    this._trigger('open', event, $this._uiHash());
},

// ... other methods/properties

However when in the scope of the event handler i attach this is the orginal element i called the widget on. I need the widget instance or specifically the widget instance’s list property.

$('select#custom').selectmenu({
    'open': function(){
       // in this scope `this` is an HTMLSelectElement not the ui widget
     }
});

Whats the best way to go about getting the list property from the widget?

EDIT: note i posted my final solution below. However, i dont like having to go back out to the DOM to get the element, so id still be interested to hear the best practices for overriding/extending an existing widget or specific internals.

Answer 1

So in the end it appears that i missed that the list is assing an id based on the name of the plugin and the original element id. so the following works:

jQuery(function(){
    jQuery('select#custom').selectmenu({
        width: 100, 
        'style': 'dropdown',
        "open": function(e, data){
            var menu = jQuery('ul#'+$(this).attr('id')+'-menu');
            menu.hide().slideDown('slow');
        },
        "close": function(e, data){
            var menu = $('ul#'+jQuery(this).attr('id')+'-menu');
            menu.addClass('ui-selectmenu-open').slideUp('slow', function(){
                menu.removeClass('ui-selectmenu-open');
            });

        },
        "change": function(){window.location = $(this).val();}
    });
});