Semantic Re-useable jQuery Tabs Plugin - Tabs
File Size: | 4.48 KB |
---|---|
Views Total: | 710 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny, easy-to-use jQuery tabs plugin which helps you implement multiple tabbed interfaces on your webpage.
How to use it:
1. Add references to jQuery library and the jQuery Tabs plugin's stylesheet & JS files.
<link rel="stylesheet" href="css/jquery.tabs.css"> ... <script src="jquery-1.11.3.min.js"></script> <script type="src="js/jquery.tabs.js"></script>
2. Create a semantic tabbed interface as follow.
<tabs> <menu> <item>Tab 1</item> <item>Tab 2</item> <item>Tab 3</item> <item>Tab 4</item> </menu> <content> <panel> <h2>Panel 1</h2> Content 1 </panel> <panel> <h2>Panel 2</h2> Content 2 </panel> <panel> <h2>Panel 3</h2> Content 3 </panel> <panel> <h2>Panel 4</h2> Content 4 </panel> </content> </tabs>
3. Initialize the tabs plugin.
$("tabs").tab();
4. Available plugin options.
// initial tab iniciante: 1, // selector for tabbed navigation menu: "menu", // selector for tabbed panels abasConteudo: "panel", // selector for panel wrapper conteudo: "content", // selector for main wrapper principal: "tabs", // selector for navigaion items itensMenu: "item",
This awesome jQuery plugin is developed by renalcio. For more Advanced Usages, please check the demo page or visit the official website.