Dialog Start tour

eTabs

This is an unique tabs plugin, it allows you to save the open tab in to the localstorage, this means that it will remember the open tab(option). The second thing is that it has an responsive option, this means that if there are to many tabs and to little space it will go into responsive mode, changing the layout of the tabs. For an example go to the documentation form page.

Basic

Easy to use custom tab plugin.

How to use

How to use HTML elements.

Markup
<ul class="etabs">
    <li class="etabs-active"><a href="#etab1">Tab 1</a></li>
    <li><a href="#etab2">Tab 2</a></li>
    <li><a href="#etab3" data-tab-source="ajax/etab-ajax.php">AJAX loaded tab</a></li>
</ul>  
<div id="etab1" class="etabs-content">
<!-- content goes here -->
</div> 
<div id="etab2" class="etabs-content">
<!-- content goes here -->
</div> 
<div id="etab3" class="etabs-content">
</div>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

HTML5 data attributes Element Example Desctription Since
data-tab-source a ajax-tab.php Allow a tab to use an AJAX loaded file. 1.0

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
etabs ul Main class for the tabs. 1.0
etabs-content div Main class for the tabs content. 1.0
etabs-active li Tab active class. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#parentcontainerid').eTabs({
	selected: 3,
	storeTab: true,
	responsive: true,
	onSwitch: function(){ }	                                          
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
selected number(integer) 1 You can choose which tab should be open at start. The second tab = 2, the third tab = 3. 1.0
storeTab boolean true You can save the selected tab to the local storage. 1.0
responsive boolean false You can use the option responsive to display the tabs in a better way if there are to many tabs and to little space. 1.0
onSwitch function function(){} Callback function that runs after the switch of a tab. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

UI Tabs

jQuery UI tabs.

This is a third party plugin, for information about how to use this plugin and examples please visit this site.