I’ve recently began writing my own addons (named yodeler) to the excellent Yahoo! UI Library.
Scrolling Tab View: yodeler.widget.ScrollTabView
My first offering is an extension of YAHOO.widget.TabView that uses a scroll animation to transition between tab content.
Examples of ScrollTabView in action are available with horizontal or vertical scrolling configurations.
It works just like TabView, except you must specify a width and height for the parent container in the attributes. All styling is done automatically!
YAHOO.util.Event.onDOMReady(function() {
var tabs = new YAHOO.yodeler.widget.ScrollTabView('canvas', { width: 700, height: 300, direction: 'vertical' }); // or 'horizontal' direction
tabs.set('activeTab', tabs.getTab(0));
tabs.addTab(new YAHOO.widget.Tab({label: 'Dynamically Added Tab', content: 'Note that the content now scrolls up and down.'}));
tabs.addTab(new YAHOO.widget.Tab({label: 'Cake is a Lie', content: 'CAKE IS LYING OH NO'}));
tabs.removeTab(tabs.getTab(4));
});
The optional attributes easing (example) and duration (example) can be used to override the default Scroll animation used in ScrollTabView with your own attributes.
Download ScrollTabView.js. It’s provided under a BSD License, so feel free to use it for anything you want!
ScrollTabView depends on the TabView and Animation components and all of their dependencies.
The ScrollTabView addon is available on reid’s yui-scrolltabview repository on github. I don’t have any immediate plans to work on 0.2 but feel free to look at it or contribute.
If you have any questions, feedback, or bugs, please contact me.