Architectural Component Demo
This is a demo of Tabify plugin.
Tabify
Themes
Transitions
Options
Usage
FAQ
Welcome to Tabify
Tabify is a jQuery plugin used to create a convenient tab widget.

Tabify was created and is maintained by the code engineers at TranquilityBase.biz

Advantages
  • Easy to use!
  • 100% jQuery & CSS
  • Preset Themes & Transitions
  • Customizable Styling
  • Supports multiple Tabify Instances & Nesting
  • Uses No Image Files or Flash

Tabs are an excellent solution for achieving high information density on a single webpage without the associated clutter and unprofessional appearance of the seemingly never-ending webpages we have all seen. Many tab solutions have relied on flash or overly complex CSS. Tabify strives to solve the complexity issues with a tab software pattern implemented using jQuery and minimal CSS while eliminating the need for Flash or image files.


Version

Note: This is a pre-release and not recommended for production code. Tabify is still in Beta testing so please feel free to contact us with any bug reports

Demo - You are using it!
Tabify Themes
For ease of use, Tabify supports preset themes via the theme option and user defined custom themes via the themeDef option, as well as standard CSS. To demo a preset theme, select a theme button and see it applied immediately to the main Tabify instance.

Presets
Custom
CSS
Preset Themes
The easiest way to create styled tabs with Tabify is to use preset color themes. Set the theme option to one of the following presets. 

// set theme to OpieTaylor
$("#header").tabify({'theme':'OpieTaylor'});

BarneyFife Default Tabify theme inspired by Black & White cinematography.
AuntBee This Tabify theme is an homage to Aunt Bee's, not quite award winning, Kerosene Pickles.
OpieTaylor Tabify theme evocative of Opie's Irish American heritage revealed by the new 1960's color TV.
TheDarlings The Tabify theme that is called to mind when one thinks of Appalacian Bluegrass.
HelenCrump A rose by any other name.
Custom Themes

Create your own custom theme array and pass it to Tabify via the themeDef option. 

var themeOtis =
{
    'headerBG':'#6c9219',
    'headerBGFrom':'#6c9219',
    'headerBGTo':'#3a542e',
    'headerColor':'#e4f2ce',
    'headerColorHover':'#cceecc',
    'contentBG':'#c4d2ae',
    'contentBGFrom':'#c4d2ae',
    'contentBGTo':'#ffffff',
    'contentColor':'#142207',
    'border':"#c4b29e"
};

$("#header").tabify({'themeDef': themeOtis});
No Theme

Tabify allows you complete control over styling by simply setting the theme option to 'none'. 

$("#header").tabify({'theme':'none'});
Content Transitions

To demo, select a transition and see it applied to the main Tabify instance.

fadeIn Fade content in and out
slideIn Slide content in and out
none Immediately show content without a transition effect
Options
contentClass Connect header to content group. String name of the content class
theme Select a pre-defined theme. 'none' disables color styling. String BarneyFife, AuntBee, OpieTaylor, TheDarlings, HelenCrump, none
transition Select a pre-defined transition. 'none' disables transitions String slideIn, fadeIn, none
contentHeight Explicitly set the content height String CSS height definition: 'auto', px, %
contentWidth Explicitly set the content width String CSS width definition: 'auto'. px, %
speed Transition speed float Default=600
themeDef Declare a custom theme. Overrides the theme option. Array 
// Example
var themeOtis =
{
    'headerBG':'#6c9219',
    'headerBGFrom':'#6c9219',
    'headerBGTo':'#3a542e',
    'headerColor':'#e4f2ce',
    'headerColorHover':'#cceecc',
    'contentBG':'#c4d2ae',
    'contentBGFrom':'#c4d2ae',
    'contentBGTo':'#ffffff',
    'contentColor':'#142207',
    'border':"#c4b29e"
};
Usage
Demo.html

jQuery initialization 

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.tabify.js"></script>
<script>
$(document).ready(function(){
    $("#tabifyHeader").tabify({
        'contentClass':'tabifyContent', // associate header to content group
        'theme':'BarneyFife', // preset theme
        'transition':'fadeIn' // preset transition
    });
});
</script>

HTML

<!-- associate tab-rel to content-id -->
<div id="tabifyHeader">
    <div rel="tabify-01">Tab 1</div><div rel="tabify-02">Tab 2</div>
</div>

<div id="tabify-01" class="tabifyContent">
    Tab 1 Content
</div>
<div id="tabify-02" class="tabifyContent">
    Tab 2 Content
</div>
Tabify FAQ
1. I cannot style my Tabyify Header or Content even though I style the tag element directly.
Depending on the particular CSS parameter, your CSS may be overwritten in theme & themeDef modes. A quick look at the themeDef option definition will give you an idea which CSS parameters will be overwritten. If you want complete control, you can specify 'none' for the 'theme' option, which prevents Tabify from applying color theme styling.
2. Does Tabify support nested tabify objects?
Yes. Remember, to use the contentClass option to specify the class name of the content div's to be associated with a specific tab header.
3. The tabs do not wrap automatically.
Tab-wrap is not yet implemented. Coming soon.