22 Mar 10 jQuery Plugin for Tabs (Tabber Plugin)

I developed a custom plug-in for jQuery that creates a tab widget which can contain practically anything it. It’s a small, lightweight plugin weighing in at 1.3kB uncompressed. You can download the Javascript here and the CSS here.

Here is a demo of it at work.

Because it’s lightweight, you need to create a few styles and structure your HTML in a certain way. While this design reduces the use of the plug-in as a plug-and-play tool straight away, it gives a lot of flexibility for the developer (you) to create your own tab design.

The first few elements that we need to create are two container DIVs and a parent DIV that holds these two.

<div id="tabber">
  <div class="tabpanels">    <!-- the container for contents -->
  </div>
  <ul class=tabs">    <!-- the container for the tabs -->
  </ul>
</div>

The “tabpanels” DIV will hold the contents. As you probably already know, only one tab should be visible at any time. The “tabs” element, implemented as an unordered list (UL), will, of course, hold the tabs.

Tab Panels

Tab panels hold the contents. Each panel should be named “tabpanel” as its class name. Within each “tabpanel” there should be an anchor with a “name” attribute that is the same value as the tab. Place whatever contents that you want within each of the tab panels. All, but one, of the tab panels should be hidden.

The only thing important about the CSS is that the “none” class should hide the contents. The rest of the styles are for aesthetics only.

The HTML:

<div class="tabpanels">
  <div class="tabpanel">    <!-- first panel is visible-->
    <a name="filter"></a>    <-- the name of the anchor here must be the same as the link in the tabs (see below) -->
    <input type="text" />
  </div>
  <div class="tabpanel none">    <!-- second panel onwards should be hidden>
    <a name="upload"></a>
    Upload <select> <option> yes </option><option> no </option> </select>
  </div>
  <div class="tabpanel none">
    <a name="share"></a>
    Share with members <input type="checkbox" />
  </div>
</div>

and the corresponding CSS:

#tabber .none {
    display: none;    /*required to hide the panels not in focus*/
}
#tabber .tabpanels {
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background-color:#8b9ca6;
    padding:8px;
}

Tabs

Tabs are implemented as an unordered list. Within each of the list item is an anchor holding the HREF value for each of the tab panel’s named anchor. The link becomes the name of the tab.

The class “selected” indicates which tab is in focus. You can style the tab in anyway you want.

The CSS styles are explained alongside the definitions.

The HTML:

<ul class="tabs">
  <li class="selected"><a href="#filter">Filter</a></li>
  <li><a href="#upload">Upload</a></li>
  <li><a href="#share">Share</a></li>
</ul>

and the CSS:

#tabber .tabs {
    margin: 0 0 0 1em;    /*the margin gives room to the left of the tabs*/
}
#tabber .tabs li {
    float:left;    /*make the tabs horizontal*/
    list-style:none;    /*remove the bullets from the list*/
    background-color:#f6f7f8;    /*the colour is for tabs not in focus*/
    /*the below styles for styling purposes only*/
    padding-left:8px;
    padding-right:8px;
    border-bottom-right-radius:4px;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-left-radius:4px;
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
}
#tabber .tabs li.selected {
    background-color:#8b9ca6;    /*the colour of the tab in focus*/
}
#tabber .tabs li a {
    color:#8b9ca6;    /*colour of the text in the tab*/
}
#tabber .tabs li.selected a {
    color:#fbfcfc;    /*colour of the text in the tab*/
}

Once you’ve got the HTML and CSS sorted out, you will have a widget that looks something like this. Of course the tabbing does not work yet. To do that you’ll have to use the plug-in.

Tabber Plug-in

I shall not explain the coding of the plug-in here to keep it short.

Using the plug-in is very simple. Take the name of the element (which in this example is the ID “tabber”) and apply the plug-in like so:

$('#tabber').tabber();

So if you had named the tabs and panels with the same classes as the examples, you’ll be able to get your plug-in working immediately. This plug-in accepts a JSON object as a parameter (like all good jQuery functions).

One of the keys it accepts in JSON is “tabs“. This name must contain a JSON object with the key “name”. This parameter basically determines the selector name within the widget that holds the tabs. The default value for this, as you probably can guess, is “.tabs“.

Another key that it accepts is “panels“. This also expects a JSON object as its value. The JSON object can contain either “name” or “container”. “name” represents the selectors that each panel is in – the default value is “.tabpanel“. “container” is the containing element that holds the tab panels and is by default “.tabpanels“.

Another key that is optional is “selected“. This key specifies the name of the selector that places the tab in focus. This has the default value of “selected“. (Note that this parameter holds only the name of the class without the prefix ‘.’ whereas the other two parameters expect the CSS notation of ID & class.)

Share with me in the comments if it works or if it doesn’t for you! You can download the Javascript here and the CSS here.