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.