Friday, March 3rd, 2006

Javascript Tabifier

Category: Programming, UI, Usability

<p>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
< view plain text >
  1. <div class="tabber">
  2.  
  3.   <div class="tabbertab" title="Section One">
  4.     <h3>Section One</h3>
  5.     Section one content.
  6.   </div>
  7.  
  8.   <div class="tabbertab" title="Section Two">
  9.     <h3>Section Two</h3>
  10.     Section two content.
  11.   </div>
  12.  
  13. </div>

Since the content is just a continuous collection of divs, it gracefully degrades nicely.

Another tab library is Tabtastic – any others?

Posted by Michael Mahemoff at 12:05 pm
14 Comments

++++-
4 rating from 60 votes

14 Comments »

Comments feed TrackBack URI

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.

Comment by Joe Grossberg — March 3, 2006

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.

Comment by Scott Schiller — March 3, 2006

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

Comment by Daniel — March 3, 2006

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.

Comment by Patrick Fitzgerald — March 3, 2006

http://www.onlinetools.org/tools/domtabdata/ – proba

Comment by Jack — March 3, 2006

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

Comment by Kae Verens — March 4, 2006

I rolled my own at
http://www.akrabat.com/dynamic-javascript-tabs/

Comment by Rob... — March 5, 2006

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) :-)

Comment by Chris Heilmann — March 6, 2006

@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.

Comment by Patrick Fitzgerald — March 6, 2006

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

Comment by Michael Jouravlev — March 7, 2006

[...] 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. [...]

Pingback by Ajaxian » Screencast on Diagnosing Memory Leaks in IE — March 31, 2006

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.

Comment by Tim — April 11, 2006

Is it possible to load only the main page at first. Then load the hidden pages on mouse click using tabertab js?

Comment by Peter — February 6, 2007

wow naturalaternaicilis how can you admit to something like that? :)

Comment by kopi — April 18, 2008

Leave a comment

You must be logged in to post a comment.