This time I will share jQuery Plugin and tutorial about Flexible jQuery Tabbed Interface Plugin – SmartTab, hope it will help you in programming stack.
| File Size: | 176 KB |
|---|---|
| Views Total: | 12563 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
SmartTab is a powerful and highly customizable jQuery plugin for creating tabbed interface with cool animation effects.
It supports ajax contents, Keyboard Navigation and is compatible with all major browsers.
How to use it:
1. Include jQuery library and the SmartTab.js script on the web page.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/dist/js/jquery.smartTab.js"></script> |
2. Include the needed stylesheet on the web page. All possible themes:
- Default
- Classic
- Brick
- Bootstrap Pills
- Bootstrap Tabs
- Dark
01 |
<!-- All in one --> |
02 |
<link href="/path/to/dist/css/smart_tab_all.min.css" rel="stylesheet" /> |
03 |
04 |
<!-- Default Theme --> |
05 |
<link href="/path/to/dist/css/smart_tab.min.css" rel="stylesheet" /> |
06 |
07 |
<!-- Brick Theme --> |
08 |
<link href="/path/to/dist/css/smart_tab_brick.min.css" rel="stylesheet" /> |
09 |
10 |
<!-- Bootstrap Pills Theme --> |
11 |
<link href="/path/to/dist/css/smart_tab_bspills.min.css" rel="stylesheet" /> |
12 |
13 |
<!-- Bootstrap Tabs Theme --> |
14 |
<link href="/path/to/dist/css/smart_tab_bstabs.min.css" rel="stylesheet" /> |
15 |
16 |
<!-- Bootstrap Tabs Theme --> |
17 |
<link href="/path/to/dist/css/smart_tab_dark.min.css" rel="stylesheet" /> |
3. The required markup structure for the tabbed interface.
01 |
<div id="smarttab"> |
02 |
03 |
<!-- Tabs --> |
04 |
<ul class="nav"> |
05 |
<li> |
06 |
<a class="nav-link" href="#tab-1"> |
07 |
Tab 1 |
08 |
</a> |
09 |
</li> |
10 |
<li> |
11 |
<a class="nav-link" href="#tab-2"> |
12 |
Tab 2 |
13 |
</a> |
14 |
</li> |
15 |
<li> |
16 |
<a class="nav-link" href="#tab-3"> |
17 |
Tab 3 |
18 |
</a> |
19 |
</li> |
20 |
</ul> |
21 |
22 |
<!-- Tabbed Content --> |
23 |
<div class="tab-content"> |
24 |
<div id="tab-1" class="tab-pane" role="tabpanel"> |
25 |
Tab content 1 |
26 |
</div> |
27 |
<div id="tab-2" class="tab-pane" role="tabpanel"> |
28 |
Tab content 2 |
29 |
</div> |
30 |
<div id="tab-3" class="tab-pane" role="tabpanel"> |
31 |
Tab content 3 |
32 |
</div> |
33 |
</div> |
34 |
|
35 |
</div> |
4. Call the plugin on the ton container and done.
1 |
$('#smarttab').smartTab(); |
5. Customize the plugin with the following options.
01 |
$('#smarttab').smartTab({ |
02 |
03 |
// Selected Tab, 0 = first tab |
04 |
selected: 0, |
05 |
06 |
// Theme |
07 |
theme: 'default', |
08 |
09 |
// Or 'vertical' |
10 |
orientation: 'horizontal', |
11 |
12 |
// Justified layout for tabs |
13 |
justified: true, |
14 |
15 |
// Auto adjust content height |
16 |
autoAdjustHeight: true, |
17 |
18 |
// Supports for Back button |
19 |
backButtonSupport: true, |
20 |
|
21 |
// Enables URL hash |
22 |
enableURLhash: true, |
23 |
|
24 |
// Configs animations here |
25 |
transition: { |
26 |
27 |
// none, fade, slide-horizontal, slide-vertical, slide-swing |
28 |
animation: 'none', |
29 |
30 |
// transition speed |
31 |
speed: '400', |
32 |
33 |
// easing function |
34 |
easing: '' |
35 |
36 |
}, |
37 |
38 |
// Auto switches between tabs |
39 |
autoProgress: { |
40 |
|
41 |
// enable |
42 |
enabled: false, |
43 |
|
44 |
// interval in ms |
45 |
interval: 3500, |
46 |
