Friday, March 3rd, 2006
Javascript Tabifier
Category: Programming
, UI, Usability
Tabs have always been used to navigate across different parts of a website, but we're starting to see more of them appear in the middle of the page as well, where Ajax-style navigation is particularly compelling. So it's nice to see some libraries help with navigation. Javascript Tabifier is Patrick Fitzgerald's contribution. In the basic usage, you just wrap a div around each block, of CSS class tabbertab:
JAVASCRIPT:
-
-
<div class="tabber">
-
-
<div class="tabbertab" title="Section One">
-
<h3>Section One</h3>
-
Section one content.
-
</div>
-
-
<div class="tabbertab" title="Section Two">
-
<h3>Section Two</h3>
-
Section two content.
-
</div>
-
-
</div>
Since the content is just a continuous collection of divs, it gracefully degrades nicely.
Another tab library is Tabtastic - any others?
4.1 rating from 53 votes
Yeah, that is really graceful, and it doesn’t have this weird issue in Tabtastic, where the page scrolls down after I click on the final tab.
A nice feature to add to TabTastic (created in 2004 there I might add, according to the copyright,) would be to monitor the hash/navigation of the URL so the tabs will change with use of the back/foward buttons. Looks like all the base work for it is there.
Here’s an older implementation of tabs
http://webfx.eae.net/dhtml/tabpane/tabpane.html this is the library the Mambo/Joomla! CMS has chosen to use.
I’m not a huge fan of MS and Windows, but this is nice and smooth:
http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html
Thanks for the link. One of my goals was to provide printing support: in all the other tabifiers I have seen, if you print the page, you only get the currently displayed tab.
http://www.onlinetools.org/tools/domtabdata/ - proba
Another example: http://silverhillfeathers.com/ - the script for it is here: http://silverhillfeathers.com/tabs.js
For a while, our company (webworks.ie) used this method to provide quick “multiple page” websites for clients.
http://truwood.ie/Clients - another one using the same library.
Kae
here is a more generic approach that tabs are a special case of:
Panels / perspectives
Pity you didn’t post this a couple of weeks ago, it would have saved me writing this widget myself.
I rolled my own at
http://www.akrabat.com/dynamic-javascript-tabs/
Quite OK, however, I wanted to maintain a navigation even for non-JavaScript users, which is why I re-use the anchor -> named anchor thing in DOMtab (which is linked above anyways) :-)
@Chris: indeed, I really liked your DOMtab implementation (and it’s giving me ideas for more features to add to mine). I can see the need for the non-JavaScript links, but my goal was to make setup as quick and painless as possible, so I wanted to avoid having to create a list and anchors.
Unlike other examples, this one requires server roundrip for every tab. In uses Ajax for in-place update if Javascript+XHR are available. Otherwise use good old redirection to composite page. Voila, dual-mode tab component.
Example: http://jroller.com/page/javadujour?entry=tabbed_notebook_component_got_simpler
Live demo: http://www.superinterface.com/jspcontrols/tabcontrol/index.jsp
[...] Patrick Fitzgerald posted a nice screencast explaining how he diagnosed and fixed an IE memory leak in his tabifier library. He walks through using the free tool Process Explorer to watch IE’s memory grow with each page refresh. He writes: This screencast discusses how I diagnosed and fixed a memory leak in a JavaScript library. It’s a very simplified example, and the same techniques probably can’t be used for more complex web applications, but it might shed some light on how these memory leaks occur. [...]
I like your site.
Blogs with comments windows that you have to click to open keep the dialogue under wraps. Blogs like this one which string comments out in the open are much more proactive about sparking dialogue.
Is it possible to load only the main page at first. Then load the hidden pages on mouse click using tabertab js?
I’ve been looking for and trying out many tab scripts, but yours is making it at the top of my short list at the moment.
Ok, first, a disclaimer: I’m a Javascript ignoramus. All I can do is download scripts, figure out how the darn thing is supposed to work, monkey here, monkey there and voila! I don’t know how it works, but hey, it works.
One thing still buggers me with your tabifier: I would like to find a way to get rid of the tooltip that gets displayed when the user mouses over each tab’s container - while keeping a full title, instead of numbers for the tabs.
Any idea?
Also, how hard would it be to implement tab selection persistence?
In any case, congrats and thanks for a very cool (and easy on idiots like me) piece of work!
wow naturalaternaicilis how can you admit to something like that? :)
http://www.barelyfitz.com/projects/tabber/
You can also use this
R&I giving up smoking