Presentation

simplyTabs is a jquery plugin that creates a tabbed interface out of a list of in-page anchors. The script is quite robust: if the anchor's target element does not exist, that specific tab is not created.

In order to achieve the "tabbification", the plugin simply uses css classes, so that you should only need basic CSS skills to tweak the plugin to your liking .

How to set it up

1. HTML Markup

   Your markup should have a container inside which the tabs will be looked for and created.

   Inside this container, define your tabs with an id (ex: "tab1" or "introduction"): each tab can be an LI, a P or a DIV tag, it shouldn't matter, as long as it is semantically relevant to the nature of your content. You can style it afterwards using CSS to suit your graphical taste.

   However, it is important that you include a tab navigation menu, in the form of self-page anchor links, where each link points to a tab element via its id (ex: <a href="#introduction">tab label</a>) . If it does not exist, the tab will simply not be created.

   Here is an example

   <div id="tabContainer">
   <ul id="anchorlinks">
   <li><a href="#tab1">Tab 1</a></li>
   <li><a href="#tab2">Tab 2</a></li>
   <li><a href="#tab3">Tab 3</a></li>
   <li>This will not be a tab</li>
   </ul>
   <div id="tab1">
   This is the first tab...</div>
   <div id="tab2">
   This is the second tab...</div>
   <div id="tab3">
   This is the third tab...</div>
   </div>
   

2. The CSS

   You control the look of your tabs entirely via your stylesheet. A sample stylesheet is provided to get you going. Basically, it allows you to control the look and dimensions of the tabs, the look and position of the tab menu. I feel that's the best way to make this plugin very versatile.

3. the javascript

   You simply call the plugin inside your document.ready function, like this:

   
<script type="text/javascript">
$(function()
{
$("#tabbedTextContent").simplyTabs({ onShow: function()
{
//this callback displays the img title as image legend
var caption = $(this.hash +" img").eq(0).attr("title");
$("#imageLegend").text(caption);
}
});
});
</script>


4. Options

   Most of the options are just a way for you to change the class names that the plugin uses. IF you do change them, make sure you reflect those changes in your CSS!

   tabsNavMenuSelector

   class of the menu to be used for the tabs detection & navigation (default : 'ul.tabsNavMenu' )

   tabsNavMenuClass

   class given to the tabs navigation menu (default: 'tab-menu')

   tabsPanelClass

   class given to the tab panels (default: 'tab-panel')

   tabsNavMenuItemClass

   class given to the menu items anchor elements (default: 'tab-menu-item')

   visibleTabClass

   class given to the active tab (default: 'tab-visible')

   invisibleTabClass

   class given to the inactive tabs ( default: 'tab-hidden')

   selectedTab

   tab selected on launch - 0-based, according to the anchor order in the html markup. (default: 0 (first tab))

   selectedTabClass

   class given to the active tab (default: 'tab-menu-item-selected')

   onShow

   callback function triggered after a tab is displayed (default: null)

Downloads