Clean & Complete

skinableTabs is an unobtrusive jQuery plugin allowing you to organize your content in attractively skinned tabs.
You can use skinableTabs with multiple positions, skins and transition effects. You can customize the look and feel of any skin in a dedicated CSS file.

Documentation

You can have beautiful, clean and organized content using your favorite skin and transition effect.

skinableTabs is the easy to use, simple, powerful and flexible solution for your tabbed content.

HTML structure

The HTML is composed of a parent element and two main parts:
  • the Navigation
  • the Content
The parent element is the one that holds both the navigation and the content and is the element to which you should apply the skinableTabs:
  1. <div class="tabs_holder">
  2. ... tabs go here ...
  3. </div><!-- /.tabs_holder -->

Navigation

The navigation is organized in the form of an unordered list, with links pointing to the tab content anchors:
  1. <ul>
  2. <li><a href="#tabs-1">Nunc tincidunt</a></li>
  3. <li><a href="#tabs-2">Proin dolor</a></li>
  4. <li class="tab_selected"><a href="#tabs-3">Aenean lacinia</a></li>
  5. <li"><a href="#tabs-4" rel="ajax_content.html">Ajax content</a></li>
  6. </ul>

Content

Each header link has a corresponding tab content, matched by it's ID:
  1. <div class="content_holder">
  2.  <div id="tabs-1">
  3.   <p>Cras ut odio non odio auctor aliquam quis in sem. </p>
  4.  </div><!-- /#tabs-1 -->
  5.  <div id="tabs-2">
  6.   <p>Cras ut odio non odio auctor aliquam quis in sem. </p>
  7.  </div><!-- /#tabs-2 -->
  8.  <div id="tabs-3">
  9.   <p>Cras ut odio non odio auctor aliquam quis in sem. </p>
  10.  </div><!-- /#tabs-3 -->
  11. </div><!-- /.content_holder -->

Selecting a tab

The class "tab_selected" makes the tab open by default at loading time.
The default tab shown is the first one in the list, if you have not assigned "tab_selected" to any other tab header.

  1. <li class="tab_selected"><a href="#tabs-3">Aenean lacinia</a></li>

Loading content via ajax

To load the tab content from an ajax location, just insert the "rel" attribute to a header link, pointing to the ajax location:
The content will load only once, when the tab is selected.
  1. <li><a href="#demo-tab-with-ajax" rel="ajax_location.html">Aenean lacinia</a></li>
Note that, even if the content is loaded via ajax, the tab id must still be defined.
  1. <div id="demo-tab-with-ajax">
  2.  <p>Please wait while the content is loading. [This text will be replaced by the contents of "ajax_location.html"] </p>
  3. </div><!-- /#tabs-1 -->

Defining a tab location

The content is organized with a main parent element and a content holder for each of the tabs. Make sure that the navigation link points to the exact id of the tab content element. For example, on the navigation link, a navigation link:
  1. <a href="#tabs-1">Nunc tincidunt</a>
points to a tab with the id: #tabs-1:
  1. <div id="tabs-1">
  2.  <p>Cras ut odio non odio auctor aliquam quis in sem. </p>
  3. </div><!-- /#tabs-1 -->
A click on the navigation link opens the coresponding tab.
  1. <a href="#tabs-1">Nunc tincidunt</a>
  1. <div class="content_holder">
  2.  <div id="tabs-1">
  3.   <p>Cras ut odio non odio auctor aliquam quis in sem. </p>
  4.  </div><!-- /#tabs-1 -->
  5.  <div id="tabs-2">
  6.   <p>Cras ut odio non odio auctor aliquam quis in sem. </p>
  7.  </div><!-- /#tabs-2 -->
  8.  <div id="tabs-3">
  9.   <p>Cras ut odio non odio auctor aliquam quis in sem. </p>
  10.  </div><!-- /#tabs-3 -->
  11. </div><!-- /.content_holder -->

Javascript includes

In order to use the skinableTabs plugin you first need to include the jQuery javascript library. You can do so by downloading it or by linking to the Google API:
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
In order to use the transition effects, you need to include the base effects from the jQuery UI:
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
Include the skinableTabs jQuery plugin:
  1. <script type="text/javascript" src="skinableTabs.js"></script>

Plugin usage

  1. <script type="text/javascript">
  2.  $('.tabs_holder').skinableTabs({
  3.   effect: 'basic_display',
  4.   skin: 'skin1',
  5.   position: 'top',
  6.   skin_path: '../'
  7.  });
  8. </script>
Be sure to selected to top element of both the navigation and the tab content. To this element you apply the skinableTabs, with the following options:

Effect

choose one of the built-in 18 show-hide transition effects. Possible values:
  1. basic_display
  2. simple_fade
  3. hide_and_seek
  4. evanescence
  5. transfading_down
  6. transfading_up
  7. overlapping
  8. slide_right
  9. slide_left
  10. slide_up
  11. fade_slide_left
  12. fade_slide_right
  13. fade_slide_up
  14. fade_slide_down
  15. horizontal_bouncer
  16. vertical_bouncer
  17. fireworks
  18. puff

Skin

choose one of the 12 fully-featured skins. Possible values:
  1. skin1
  2. skin2
  3. skin3
  4. skin4
  5. skin5
  6. skin6
  7. skin7
  8. skin8
  9. skin9
  10. skin10
  11. skin11
  12. skin12

Position

choose the position of the navigation links. Possible values:
  1. top
  2. right
  3. bottom
  4. left

Skin path

skin_path is used for the script to load the skins. Use this if the skins folder is in a different location than the page using the script. Usually, this path is the same as the script include path:
  1. <script type="text/javascript" src="../skinableTabs.js"></script>
  2. <script type="text/javascript">
  3.  $('.tabs_holder').skinableTabs({
  4.   effect: 'basic_display',
  5.   skin: 'skin1',
  6.   position: 'top',
  7.   skin_path: '../'
  8.  });
  9. </script>