Simple Toggle Tabs Plugin with jQuery/HTML5 - Tabby
File Size: | 123 KB |
---|---|
Views Total: | 5884 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tabby is a super tiny jQuery plugin used to create a stylish tabs control with support for Ajax loaded content.
Basic Usage:
1. Load the latest version of jQuery library in your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2. Load the jQuery tabby plugin's files in the document. Make sure the jquery.tabby.js
script is loaded after jQuery library.
<link rel="stylesheet" href="css/tabby.css"> <script src="dist/jquery.tabby.js"></script>
3. Create tabbed content and use data-ajaxcontent
attribute to specify the external URL you wish to load into the tabs control via Ajax request.
<div class="tabby-content" id="tab-content"> <div data-tab="tab1"> <p>Tab Content 1</p> </div> <div data-tab="tab2"> <p>Tab Content 2</p> </div> <div data-tab="tab3" data-ajaxcontent="ajaxcontent.html"></div> </div>
4. Create tab navigation for the tabbed content.
<nav id="tabby-demo" class="tabby-tabs" data-for="tab-content"> <ul> <li><a data-target="tab1" class="active" href="#">Tab 1</a></li> <li><a data-target="tab2" href="#">Tab 2</a></li> <li><a data-target="tab3" href="#">Tab 3</a></li> </ul> </nav>
5. Initialize the plugin and done.
$('#tabby-demo').tabby();
6. Default plugin options. Options can be overwritten when initializing plugin, by passing an object literal, or after initialization.
$('#tabby-demo').tabby({ fadedOpacity: '0.2', onInit: function () {}, onLoad: function () {}, onDestroy: function () {} });
Change log:
2015-02-10
- added a loading spinner for Ajax requests.
This awesome jQuery plugin is developed by SubZane. For more Advanced Usages, please check the demo page or visit the official website.