Home

Docs

Prerequisites

Include the following javascript libraries on your page, before including this plugin

• jQuery - http://www.jquery.com
• jQuery tools - http://flowplayer.org/tools/index.html
• jQuery easing - http://gsgd.co.uk/sandbox/jquery/easing/

Basic Operation

Setup your markup as per the documentation for the jQuery tools 'tabs' - http://flowplayer.org/tools/tabs/index.html

<nav>
 <ul id='tabs'>
  <li><a href='#'>One</a></li>
  <li><a href='#'>Two</a></li>
 </ul>
 <span id='indicator'></span>
</nav>

<div id='content'>
  <section>First tab content</section>
  <section>Second tab content</section>
</div>

You'll need some basic CSS applying for tabs() to work as intended and the indicator to display properly:

nav { position: relative; }
nav ul { overflow: hidden; }
nav li { float: left; }
nav #indicator {
	position: absolute;
	bottom: 5px;
	width: 12px;  /* width of the indicator image */
	height: 7px;  /* height of the indicator image */
	background-image: url('notch.png'); /* image to be used for the indicator */
}
#content section { display: none; }

Now the call to indicatedTabs, this is exactly the same as the call to jQuery tools tabs() but with two optional configuration objects

$('#tabs').indicatedTabs("#content section", {}, {});

Options

The first of the configuration option objects is for the indicator, here are the defaults:

defaultOptions = {
  indicator: '#indicator',   // selector for the indicator to be moved
  childrenSelector: 'li',    // selector for the items within the tabs container
  duration: 600,             // duration of the animation, in ms
  easing: 'easeInOutExpo',   // which easing equations to user
  vertical: false            // true if the indicator should be animated vertically
}

The second is the options for the jQuery tool tabs() call, these are passed straight through.