I'm just getting started with the YUI JavaScript framework. My first task was to wrap YUI TabView control with an ASP.NET control so I could easily design and manage it from the server side. Part of this task involved tracking the selected tab.
It's easy enough to hook the appropriate event:
new YAHOO.widget.TabView('id').addListener('activeTabChanged', tabViewChangeHandler);
But how do I, from the handler, get a reference to the YUI TabView object? I need a reference to the object so I can get its ID and the set a hidden field to record the currently selected tab.
As it turns out, the this keyword conveniently enough references the TabView object within event handler functions. Cool! So recording the selected tab in a hidden field is pretty easy:
tabViewTabChangeHandler : function(oEvent)
{
var sTabViewId = this.get('element').id;
var sTabId = oEvent.newValue.get('contentEl').id;
var oTabIdField = YAHOO.util.Dom.get(sTabViewId + "_sel");
oTabIdField.value = sTabId;
}
