This time I will share jQuery Plugin and tutorial about Select Based Responsive Tabs Plugin For jQuery – responsiveTabs, hope it will help you in programming stack.
| File Size: | 5.78 KB |
|---|---|
| Views Total: | 1558 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another jQuery responsive tabbed system which converts horizontal tabs into a select dropdown list on small screen devices.
How to use it:
1. Place jQuery library and the jQuery responsiveTabs plugin’s JavaScript file at the bottom of the html page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="responsive-tabs.js"></script> |
2. Create a tabbed system with plain html structure.
01 |
<div id="respTabs"> |
02 |
<div> |
03 |
<h2>Tab 1</h2> |
04 |
<div> |
05 |
Content 1 |
06 |
</div> |
07 |
</div> |
08 |
<div> |
09 |
<h2>Tab 2</h2> |
10 |
<div> |
11 |
Content 2 |
12 |
</div> |
13 |
</div> |
14 |
<div> |
15 |
<h2>Tab 3</h2> |
16 |
<div> |
17 |
Content 3 |
18 |
</div> |
19 |
</div> |
20 |
</div> |
3. You can set one of the tabs as the default tab using resp-tab="default" attribute.
1 |
<div resp-tab="default"> |
2 |
... |
3 |
</div> |
4. Call the function on the top container as follow:
1 |
$('#respTabs').responsiveTabs(); |
5. Add your own CSS styles to the tabbed system.
01 |
.resp-headings { display: none; } |
02 |
03 |
.resp-contents { margin: 0.6em 0 0 0.5em; } |
04 |
@media (max-width: 480px) { |
05 |
06 |
.resp-tablist { display: none; } |
07 |
08 |
.resp-tabDrop { |
09 |
display: block; |
10 |
width: 100%; |
11 |
height: 35px; |
12 |
font-size: 1.2em; |
13 |
margin: 1em 0 0 0; |
14 |
} |
15 |
} |
16 |
@media (min-width: 481px) { |
17 |
18 |
.resp-tabDrop { display: none; } |
19 |
20 |
.resp-tablist { |
21 |
display: block; |
22 |
font-size: 1.2em; |
23 |
margin: 2em 0 0 0; |
24 |
padding: 0; |
25 |
border-bottom: 1px solid #ddd; |
26 |
padding-bottom: 11px; |
27 |
line-height: 1em; |
28 |
} |
29 |
30 |
.resp-tablistItem { |
31 |
display: inline; |
32 |
cursor: pointer; |
33 |
background: #eee; |
34 |
padding: 10px 20px; |
35 |
border: 1px solid #ddd; |
36 |
margin-right: 0.1em; |
37 |
} |
38 |
39 |
.resp-tablistItem__active { |
40 |
background: #fff; |
41 |
border-bottom-color: #fff; |
42 |
} |
43 |
} |
This awesome jQuery plugin is developed by pandeyanupj. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
