Multi-purpose jQuery Tabs Interface Plugin - Tabs.js
File Size: | 12.3 KB |
---|---|
Views Total: | 1913 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tabs.js is a lightweight jQuery plugin which helps you to present sectioned content in a horizontal/vertical or accordion-style tabbed interface.
More features:
- Custom animation types.
- Configurable animation speed.
- Callback functions.
- Supports hash change.
- Cross browser.
How to use it:
1. Load the jQuery tabs.js plugin after jQuery library and we're ready to go.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="build/js/tabs.js"></script>
2. Below is a very basic setup for the tabs. Just providing 3 simple tabs and minimal styling.
- data-tab: target content
- data-tab-content: content
- data-tabs-default: default tab
<div class="basic-tabs tab-container"> <a data-tab="#basic-tab1" href="#">Tab 1</a> <a data-tab="#basic-tab2" href="#">Tab 2</a> <a data-tab="#basic-tab3" href="#">Tab 3</a> <div data-tab-content data-tabs-default id="basic-tab1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p> </div> <div data-tab-content id="basic-tab2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> </div> <div data-tab-content id="basic-tab3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p> </div> </div>
$('.basic-tabs [data-tab]').tabs();
3. Below is a very basic setup for the tabs. Just providing 3 simple tabs and with the tab links positioned to the side.
<div class="side-tabs tab-container"> <div class="tab-links"> <a data-tab="#side-tab1" href="#">Tab 1</a> <a data-tab="#side-tab2" href="#">Tab 2</a> <a data-tab="#side-tab3" href="#">Tab 3</a> </div> <div class="tab-content"> <div data-tab-content id="side-tab1"> <h2>Tab 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> </div> <div data-tab-content data-tabs-default id="side-tab2"> <h2>Tab 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> </div> <div data-tab-content id="side-tab3"> <h2>Tab 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> </div> </div> </div>
$('.side-tabs [data-tab]').tabs();
4. Below is a simple way to turn the tabs into an accordion.
<div class="accordion-tabs tab-container"> <a data-tab="#accordion-tab1" href="#">Tab 1</a> <div data-tab-content id="accordion-tab1"> <h2>Tab 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> </div> <a data-tab="#accordion-tab2" href="#">Tab 2</a> <div data-tab-content id="accordion-tab2"> <h2>Tab 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> </div> <a data-tab="#accordion-tab3" href="#">Tab 3</a> <div data-tab-content data-tabs-default id="accordion-tab3"> <h2>Tab 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi consectetur, accusantium!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ipsam nobis laudantium, tenetur dolorem, maiores obcaecati. Aperiam a laudantium, dolore, doloribus commodi officia.</p> </div> </div>
$('.accordion-tabs [data-tab]').tabs({ inAnimation: 'slideDown', outAnimation: 'slideUp', speed: 200, animationComplete: function(tab) { var top = $(tab).position().top; $(window).scrollTop(top); console.log(top); } });
5. Default configuration options.
$('.accordion-tabs [data-tab]').tabs({ // fadeIn, slideDown, show, hide inAnimation: 'show', outAnimation: 'hide', // animation speed speed: 0, // CSS class for active tab activeClass: 'tab-active', // callback functions complete: function(element, tab) {}, animationComplete: function(tab) {}, // watch the url for hash changes to trigger tabs watchHash: true, // open a default tab based on the url hash defaultFromHash: true });
This awesome jQuery plugin is developed by jralph. For more Advanced Usages, please check the demo page or visit the official website.