Tabs!

So I finished adding Group assignments into the system of OLM; yes… more tests is needed, but it works, backed by my personal approval.

So now, its massive UI time; I got the task of implementing Tabs (well, I’ve stole it from under Martin’s nose, I was kinda attached to the idea of tabs)

So while thinking of a way to implement this, I first google’d up for tab implementations, because I’m sure, there are half a billion tab implementations already out there, and maybe (being the lazy person I am), I can use their implementation instead of having to write mine from scratch.

I’ve came across two implementations:

One was the Javascript Tabifier:
http://www.barelyfitz.com/projects/tabber/

The other was Tabtastic (awesome name):
http://phrogz.net/JS/Tabtastic/index.html

both of them had pretty pictures and simple tutorials on how to implement your personal websites into it. I personally didn’t manage to get tabifier to work, but Tabtastic seems to be playing fine, though I didn’t like the way it was handling tabs. It would re-render your tabs into markers on your page and when you click the tab headers, your page would “jump” to the marker and show your tabs. This of course, mean that my page flies to the file container of the page, making it very annoying for the user.

Ultimately, I did like the css sheet that Tabtastic has, so I took that and modified it (I’m not too familiar with css myself yet). Using that, and the system of drawing everything into a single box, and some visibility fiddling, I got tabs to work the way I like em to. makeVisible and makeInvisible was my favorite tools in making such a simple implementation.

Tabs!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: