Tabs

Basic

A simple sentence to give us some content.

Another simple sentence to give us some content.

Yet another simple sentence to give us some content.

Load Local and Ajax Content

This is local content. You have to provide the wrapper with correct ID. For the ajax stuff, these will be built out by the plugin.

Just link to the ajax that should load inside the <a> and it will automatically get the correct wrapper and the content will be placed here like a normal tab.

Track in the URL

To track which tab is selected in the URL (which inherently makes it bookmarkable, shareable, etc) simply add an ID to the ixf-tabs-wrapper element.

A simple sentence to give us some content.

Another simple sentence to give us some content.

Yet another simple sentence to give us some content.

This uses the jQuery UI plugin straight out of the box. See the jQuery UI site for documentation.

This uses the jQuery UI plugin straight out of the box. See the jQuery UI site for documentation.

Styles

Styles are applied using the standard jQuery UI classes for the accordion plugin. So if you call the accordion script without using the ixf, the correct look and feel will still be applied

General Instructions

You can load content that is already located on the page, or have tabs be AJAX calls.

Just point to the content as appropriate (#local for local and content.html for AJAX) and the script takes care of the rest.

AJAX

AJAX content will be cached until the page is refreshed, so additional requests will not show the loading indicator and will load immediatly. If you would like to update the content of a given tab due to the content being updated since the current view, do the following.

$("selector").tabs( "load" , index );
// index is 0 based so "Ajax Content 1" (in the above tabs) would be index 2

Running the code above (updated to the correct selector and index) will immediately update the content of that tab, even if it is not currently focused. It does not wait until the next time you visit the tab.

URL Tracking

If you would like to have the tabs that users visit tracked in the history and updated in the URL, simply give the .ixf-tabs-wrapper element an ID. Any ID will do, as long as it isn't used elsewhere on the page (or other content that may be included in the current view). The IxF takes care of the rest. If you do not provide an ID, changing tabs will not be added to the browser history or update the URL.

Fill Available Height

If you would like to have the tabs fill the available height, set a class of "ixf-set-minheight" on the ixf-tabs-wrapper element. This will set a min-height that will make the tabs take up as much height as they can without causing a scrollbar. If individual tab panels have content that push them beyond that boundry, they will take up as much height as they need.

Full Documentation

The tabs are just the default jQuery UI tabs with a few things setup by default (loading indicators, accessibility tweaks, etc). You can view the full documentation to configure your own version of the tabs.

The following data- attributes can be used to quickly setup timepicker fields.

Name Type Default Options Description
data-tabs-disabled boolean (.ixf-tabs li) Should the tab be disabled. Added 1.0.1
data-tabs-options string (.ixf-tabs-wrapper) You can pass any additional options you want to set custom for this instance. Must be formated with single quotes wrapping the value and double quotes used inside (ex: data-tabs-options='{"event":"click"}')

Options Column = The script only recognizes these values