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.
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.
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 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
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 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.
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.
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.
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 |
---|---|---|---|---|
boolean | (.ixf-tabs li) Should the tab be disabled. Added 1.0.1 | |||
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