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.
All of my YUI addons are available from a public SVN repository here: https://internal.reidburke.com/public/svn/yui-addons/. Update (5 Oct 2008): Future development will take place on reid’s yui-scrolltabview repository on github. This is because my SVN and Trac server is hosted through my home internet connection and may not be as reliable. It is also because Git is pretty awesome. I don’t have any immediate plans to work on 0.2 but feel free to look at it or contribute.
You can view the SVN repository online and track my development progress using my YUI Addons Trac.
I am working to develop additional YUI addons and putting up JSDoc documentation for ScrollTabView.
If you have any questions, feedback, or bugs, please contact me!