Skip to content

Adding a tabview to an existing application with the YUI library

I recently built a small web application and the client requested, after a significant portion was built, that it be placed in different tabs. I immediately thought of the Yahoo! User Interface Library, which is a set of independent components “for building interactive web applications.”

I just wanted the TabView component, which is easy to just drop in and has pretty good documentation. This component is new in the 0.12 version of the YUI library.

However, FireFox 1.5 had an issue with the pages once the component was added. The different tabs would show up, but the bodies were all visible at the same time. IE6 did not have that issue, bizarrely enough. I asked some questions on the mailing list and received some helpful answers–the main things I needed to do were add the component instantiation function to the onload method of the window, and make my HTML valid. I used the W3C validator for the latter.

This post is pretty short, and I guess that’s the point–adding tabs to an existing application was pretty easy using the Yahoo! libraries.

Using the YUI library was simple and the support and documentation were good. I don’t like to think of how long it would have taken me to write a tab interface supported on so many browsers. If you need to retrofit some UI magic onto an existing application, or you just want discrete components for your web application (as opposed to the all in one approach of GWT), YUI is well worth a look.

[tags]YUI,web applications[/tags]

3 thoughts on “Adding a tabview to an existing application with the YUI library

  1. Robert (visitor from France) says:

    Yeah, Firefox has trouble with a lot of things. As my site took off, I starting to get a lot of complaints about things not working, not displaying and so on. All from Firefox users. So I had to put Firefox on my PC and go through my site, making changes so that everything works in Firefox. One of the changes was so complicated I had to hire a designer. I like some aspects of Firefox (much faster than IE), but they really need to sort out the code limitations.

  2. clark says:

    Could you please provide us with the url to your mailing-list post, as I am having the same compatibility problems with tabview.

    Thanks

Comments are closed.