Minimal Handy jQuery Tabs Plugin - AddTabs
File Size: | 18.4 KB |
---|---|
Views Total: | 2737 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

AddTabs is a dead simple-to-use jQuery plugin used to create a Material Design style tabs interface from plain HTML.
How to use it:
1. Load jQuery library and other required resources in your html page.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="res/Obj.js"></script>
2. Add tabs and tab panels to a container with the data-addui='tabs'
attribute as this:
<div data-addui='tabs'> <div role='tabs'> <div>Tab 1</div> <div>Tab 2</div> <div>Tab 3</div> </div> <div role='contents'> <div> <p>Tab 1 Content</p> </div> <div> <p>Tab 2 Content</p> </div> <div> <p>Tab 3 Content</p> </div> </div> </div>
3. Style the tabs interface and make it responsive using CSS flexbox model.
.addui-Tabs .addui-Tabs-tabHolder { display: flex; } .addui-Tabs .addui-Tabs-tabHolder .addui-Tabs-tab { flex: 1; border-bottom: 1px solid rgba(0, 0, 0, 0.12); text-align: center; padding: 8px 16px; cursor: pointer; color: rgba(0, 0, 0, 0.87); } .addui-Tabs .addui-Tabs-tabHolder .addui-Tabs-tab.addui-Tabs-active { padding-bottom: 5px; border-bottom: 4px solid #3f51b5; } .addui-Tabs .addui-Tabs-content { display: none; } .addui-Tabs .addui-Tabs-content.addui-Tabs-active { display: block; }
This awesome jQuery plugin is developed by dustinpoissant. For more Advanced Usages, please check the demo page or visit the official website.