1.0.0 • Published 10 years ago
smd_tabs v1.0.0
#jQuery Tab Content
Package Managers
// npm
npm install smd_tabs
// bower
bower install smd_tabs
Set up your HTML
<div class="tabs-area">
<ul class="tabs-link">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
<li><a href="#tab3">Tab #3</a></li>
<li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="tab-holder">
<div id="tab1">
<p> Content </p>
</div>
<div id="tab2">
<p> Content </p>
</div>
<div id="tab3">
<p> Content </p>
</div>
<div id="tab4">
<p> Content </p>
</div>
</div>
</div>
Call the plugin
$(document).ready(function() {
$('.tabs-link').jqTabContent();
});
Customizing
1. Options
2. Callbacks
Popup Data methods
// Initialize Plugin
$('.tabs-link').jqTabContent();
// Get popup instance data
var instance = $('.tabs-link').data('JQTabContent');
// Public methods
instance.showTab(item, tab); // show current tab
instance.hideTab(item, tab); // hide current tab
instance.prevTab(); // go to prev tab
instance.nextTab(); // go to next tab
instance.numTab(x); // go to x tab
instance.destroy(); // destroy tabs
1.0.0
10 years ago