There’s been some discussion on flexcoders about a better TabNavigator component. And a few people have done some good stuff expanding on the original TabNavigator in the Flex framework. I figured I’d play around and try to add a little to the current TabNavigator modifications that are floating around.

First, a few references. Here’s a TabNavigator with draggable tabs that was posted on a blog called code zen. I used this as my starting point (well, actually I started from scratch, then realized this was already out there). The customized TabNavigator component there is pretty good. So I grabbed that, cleaned up a bit of the re-ordering of tabs stuff, made a few other tweaks, and then added some functionality of my own.

The demo’s below. Basically this allows you to add and remove tabs, drag tabs, but the cool part about what I added is the scrolling of the tabs. If the tabs get too long they do sort of what Firefox does, which is put buttons with left and right arrows on the sides of the tabs and allow you to scroll through them. I also added a drop-down button to the right edge that lets you select any of the tabs from a list, again a la Firefox.

I know Jason from Flexible Experiments has said he’s about to release the same component with the source. So his might come out in the next few days and make mine irrelevant.

I’ll release the source of my stuff in a day or two, after I clean it up a bit. Like I said, I used the code off of the code zen blog as my base, and I’m not in any way trying to steal that and claim it as my own. I’ll pubish the source of all my additions, and hopefully everyone can work together to make a TabNavigator that finally meets everyone’s demands. I figure between what’s already out there, whatever’s coming from Flexible Experiments, and anything that I included that’s not in the others, we’ll be able to get a pretty solid TabNavigator.

So here’s the demo. Try adding a bunch of tabs and see what happens when you add too many to display at once. Try re-ordering the tabs by dragging them. See the pretty little indicator arrow? ooh aah…