Tabs are usually used in concert with an element that activates the tab. When using tabs, unlike other UI components, the menu or activating element is initialized instead of the tab.

Tabs are connected to their activators with a metadata attribute data-tab. This should be added to both the activating element and the tab itself.

After any tab is opened it will look for a default tab to open inside of the current tab. This is the first tab that begins with the same stem url as the parent tab. For example a tab with the path data-tab="home" might open a tab automatically data-tab="/home/inbox".

This will happen recursively for every tab open, allowing as many levels of tabs as you like

$('.first.example .menu .item') .tab({ context: '.first.example' }) ;

...

Tabs can attach to a history change event to allow for tabs to maintain history events. Tabs use Asual's Address library to provide cross-browser push state support. This makes sure in browser that don't support push state, hashchange is used with in page anchors to provide history functionality.

Make sure when you use history to specify the path. This is required for determining the stem url from the part of the url maintaining in page history. The path is the URL without any tabs open. This cannot usually be set automatically because on future page refreshes the URL may include an internal link. Using the incorrect path will cause the module to work incorrectly, producing unexpected results.

Be sure to set up routes on your server for any url used with history. If you use history to change the url to a location that does not exist, it will 404 on the next refresh. The docs for example, are static github hosted pages, so will 404 if the page url changes

$('.history.example .menu .item') .tab({ context : '.history.example', history : true, path : '/modules/tab.html' }) ;

The easiest way to setup dynamic content is to use the parameter auto, this will automatically retrieve content at a remote url matching the url set in the browser. The URL will receive an addition HTTP Header 'X-Remote': true. You can use this on your server's back-end to determine whether a request is an AJAX request from a tab

This uses a similar technique to pJax or Rail's turbolinks.

There are a variety of settings for configuring dynamic content behavior. Visit the tab settings section for more information

$('.dynamic.example .menu .item') .tab({ context : '.dynamic.example', auto : true, path : '/modules/tab.html' }) ;

All the following behaviors can be called using the syntax $('.foo').tab('behavior name', argumentOne, argumentTwo)

attach events(selector, event)	Attaches tab action to given selector. Default event if none specified is toggle
show	Shows tab
hide	Hides tab
toggle	Toggles visibility of tab
is open	Returns whether tab is open
is closed	Returns whether tab is closed
push page	Pushes page content to be visible alongside tab
get direction	Returns direction of current tab
pull page	Returns page content to original position
add body css	Adds stylesheet to page head to trigger tab animations
remove body css	Removes any inline stylesheets for tab animation
get transition event	Returns vendor prefixed transition end event

Setting	Default	Description
overlay	false	Whether tab should overlay page instead of pushing page to the side
useCSS	true	Whether to use css animations or fallback javascript animations
duration	300	Duration of side bar animation

Setting	Default	Description
namespace	tab	Event namespace. Makes sure module teardown does not effect other events attached to an element.
className	className: { active : 'active', pushed : 'pushed', top : 'top', left : 'left', right : 'right', bottom : 'bottom' }	Class names used to attach style to state

Setting	Default	Description
name	Tab	Name used in debug logs
debug	True	Provides standard debug output to console
performance	True	Provides standard debug output to console
verbose	True	Provides ancillary debug output to console
errors	error : { method : 'The method you called is not defined.', notFound : 'There were no elements that matched the specified selector' }

Examples

Opening tabs with menus

Default tabs

Optional Coupling

Managing History with Tabs

Setup Paths

Route your URLs

Retreiving Dynamic Tab Content

Behavior

Settings

Transition Settings
Form settings modify the transition behavior

DOM Settings
DOM settings specify how this module should interface with the DOM

Debug Settings
Debug settings controls debug output to the console