Unwrongest

Hello, my name is Jan Jarfalk and I'm an interaction designer and interface developer. This, my lab, is where I learn and evolve.

Tabify

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.

How to use Tabify

It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.

  1.   <ul id="menu">
  2.     <li class="active"><a href="#jquery">jQuery</a></li>
  3.     <li><a href="#prototype">Prototype</a></li>
  4.     <li><a href="#ext">Ext</a></li>
  5.   </ul>
  6.  
  7.   <div id="jquery">
  8.    jQuery is a cross-browser…
  9.   </div>
  10.   <div id="prototype">
  11.    The Prototype JavaScript…
  12.   </div>
  13.   <div id="ext">
  14.    Ext (X-t) is a JavaScript…
  15.   </div>

When you have created the necessary html code you need to include the javascript file with the plugin and call the tabify method.

  1. $( selector ).tabify();
  2.  
  3. //…or with a callback
  4. $( selector ).tabify(function(){});
Change log
VersionChanges
1.5Fixed an issue where multiple instances would make Tabify crash.
1.4Fixed an issue where a malformed hash would make Tabify crash.
1.3Fixed an issue causing the page to jump when you clicked on the tabs

3 days ago

Twitter Bootstrap 2.0 is here. By nerds, for nerds. Cross everything. http://t.co/J4cFxGlb A neat looking front-end toolkit.

9 days ago

Looking for a solid way to do application versioning? Look no further. http://t.co/OMYJ2xzF Semantic Versioning guidelines are nifty!

15 days ago

On Amazon: Bad reviews are better for product sales than no reviews. (via @ronnestam )

15 days ago

There are only 180k Twitter users in Sweden, but ~75% of Sweden’s journalists use Twitter. (via @ronnestam )