Friday, March 3rd, 2006
Javascript Tabifier
Category: Programming, UI
, Usability
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?
Related Content:
4.1 rating from 55 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.
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
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?
wow naturalaternaicilis how can you admit to something like that? :)