It seems like there should be, but I’ve looked over the API and nada. I don’t see how it’s done in 2.x. Currently, I store references with the elements to the tab and tabview objects via jQuery’s data method.
The why: When I interact with the tabs via mouseovers and clicks, I need to be able to reference the YUI tab/tabview objects’ properties & methods. Since I’m using event delegation b/c I have so many tabs (tabs within tabs), I’m not directly attaching (potentially hundreds of) event listeners, and thus I don’t have access to the tabs and tabviews via the this symbol.
There’s a corresponding method for buttons (YAHOO.widget.Button.getButton) but not one for tabs unless I’m missing something obvious.
Additionally, it seems that if I have a tab object, there’s not a reference to the tabview. Once again, I create my own reference, but I assume there should be a reference or an accessor method already.
Can anyone shed any light on this? Anyone else approaching this differently?
The best place for YUI questions are the forums on yuilibrary.com.
The YUI TabView component has event delegation built-in. Every Tab event is actually handled by the TabView that it belongs to. Each events is routed to the appropriate Tab, and the context of the handler is set to the Tab.
This allows you to assign your listeners as you normally would:
tabview.getTab(1).on(‘mouseover’, function(e) {
console.log(e.target.innerHTML); // e.target === Tab Label Element
console.log(this.get(‘label’)); // this === Tab instance
});
This works for nested TabViews as well.
There is currently no binding between Tab and TabView except for the TabView’s “tabs” attribute. You can iterate this collection and compare your element to each Tab’s “element” attribute if there is a use-case for knowing which TabView it belongs to.