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

Wow! I don’t even remember anymore how I managed before this new awesome boilerstrap. http://t.co/bWzwqVf2

3 days ago

If you like coding and competing and want to see Stockholm at its best; Checkout Escape from /dev/null – DICE edition. http://t.co/0SapzZxz

5 days ago

Going where none has gone before and pushing the boundaries of what has been called done. Mine, @soe, @tussetor #SthlmStartupHack app ≈Done