Basic jQuery Tabbed Interface Plugin - Tabify
File Size: | 2.94 KB |
---|---|
Views Total: | 2090 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tabify is a really simple jQuery plugin that helps you generate a basic tabbed interface from plain Html markup.
How to use it:
1. Load the jQuery Tabify plugin's script after loading jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src='tabify.js'></script>
2. Markup Html structure for the tabbed navigation & panels.
<div class="myTabs"> <ul> <li>Tab One</li> <li>Tab Two</li> <li>Tab Three</li> </ul> <div> <h3>Page 1</h3> </div> <div> <h3>Page 2</h3> </div> <div> <h3>Page 3</h3> </div> </div>
3. The primary CSS styles for the tabbed interface.
input[name=tabifyTabs] { display: none !important; } input[name=tabifyTabs] + label { padding: 10px !important; display: inline-block; height: auto !important; } input[name=tabifyTabs]:checked + label { background: #FAFAFA; color: #44587D; } .tabify { text-align: center; } .tabifyTabs { height: auto; } .tabifyTabs > div { display: none; padding: 10px; padding-top: 10px; } .tabifyTabs div .dropdown-button { padding-left: 30px; padding-right: 30px; }
4. Add your own styles to the tabbed interface.
input[name=tabifyTabs]:nth-of-type(1):checked ~ .tabifyTabs > div:nth-child(1), input[name=tabifyTabs]:nth-of-type(2):checked ~ .tabifyTabs > div:nth-child(2), input[name=tabifyTabs]:nth-of-type(3):checked ~ .tabifyTabs > div:nth-child(3), input[name=tabifyTabs]:nth-of-type(4):checked ~ .tabifyTabs > div:nth-child(4) { ... } .tabify { ... } .tabifyTabs > div { ... }
5. Initialize the plugin.
$('.myTabs').tabify();
This awesome jQuery plugin is developed by ISNIT0. For more Advanced Usages, please check the demo page or visit the official website.