YUI: ScrollTabView Makes Tabbed Views Even Better

I’ve recently been tinkering with the excellent Yahoo! UI Library. My first contribution to the community is ScrollTabView, an extension of TabView that uses a scrolling animation to switch between tabs. (Just check out the examples.)

My inspiration was Panic’s Coda site as well as a few others. Now it’s easy to create a similar effect on your site using YUI.

Check out my new YUI addons page to grab the code and view more examples!

Update: I’ve been featured on the official YUI Blog!

Update 2 (May 27): I’ve been featured on Ajaxian!

Responses

  1. Hung Avatar

    Nice one! BUT! I would need installation procedure, what do i do with the piece of code? Thanks in advance!

  2. TheAnand Avatar

    Your example page is dead and as Hung above me said…..something step by step will be really appreciated.

  3. Reid Avatar

    I apologize for the inconvenience. Example code is still available here: http://github.com/reid/yui-scrolltabview/tree/master/yodeler/examples/ScrollTabView

    I’m working right now on moving the example pages and library download to GitHub Pages, which will be much more reliable than my personal cable connection.

  4. Reid Avatar

    Done! I’ve updated my YUI addon page with working example and download links. Thanks for your patience.

    I’m currently unable to create a step-by-step guide, but I hope the provided code samples are clear enough for you to apply toward your own use. The main difference from a regular TabView is that you need to specify a fixed height and width as well as a scroll direction.