jquery.simpletabs v1.2.3
The jquery.simpletabs
plugin shows a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages. Multiple tabs bars can be shown on a page for nested navigation.
Usage
<link href="/path/to/jquery.simpletabs/jquery.simpletabs.css" rel="stylesheet" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
<script src="/path/to/jquery.simpletabs.js" type="text/javascript" charset="utf-8"></script>
<script>
let tabsConfig = {
tabs: [
{
id: 'demoTab1',
label: 'Demo Tab 1',
tooltip: 'This is demo tab 1',
url: 'demo-tab-1.html'
}, {
id: 'demoTab2',
label: 'Demo Tab 2',
tooltip: 'This is demo tab 2',
url: 'demo-tab-2.html'
}
]
};
$(document).ready(function() {
$('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab1');
});
</script>
<div id="simpleTabsDemo"></div>
Define the tabs configuration once as an object in a JavaScript file. Include that in your HTML pages, and pass the tabs configration object as the first parameter to .simpleTabs()
. The second parameter indicates the ID of the active tab. Above example is for the first page demo-tab-1.html
.
Configuration
Pass a configuration object to .simpleTabs()
:
{
tabs: [
{
id: 'demoTab1', // HTML ID of tab, must be unique per page, required
label: 'Demo Tab 1', // tab label, required
tooltip: 'This is a demo', // tooltip message for tab, optional
url: 'demo-tab-1.html', // page/anchor URL, required
spacers: 2, // number of spacers preceeding tab, optional, default: 1
tabClass: 'forAdminOnly', // add classes to tab, optional, default: 'jqSimpleTabsTab'
spacerClass: 'forAdminOnly' // add classes to spacer, optional, default: 'jqSimpleTabsSpacer'
},
// etc...
],
debug: false
}
Demo
See demo.html