Accessible High Performance Tabs Plugin with jQuery and Velocity.js
File Size: | 16.7 KB |
---|---|
Views Total: | 4395 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

tabtab.js is a lightweight jQuery plugin for creating accessible, high performance tabbed content panels with some cool transition effects powered by Velocity.js.
Key Features:
- Lightweight and easy to use.
- Customizable animations.
- Easy structure.
- Accessible.
- Keyboard navigation.
- Fully styleable via CSS.
How to use it:
1. Load the necessary jQuery library and Velocity.js from CDN.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
2. Download, unzip and include the jQuery tabtab.js script after jQuery library.
<script src="src/tabtab.js"></script>
3. Create tab navigation & tabbed content panels with plain Html structure as follow.
<div class="tabdemo my-tabs"> <ul class="tab-menu menu"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <div class="tab-content content"> <div class="tab-content-item"> <p>Tabbed content 1</p> </div> <div class="tab-content-item"> <p>Tabbed content 2</p> </div> <div class="tab-content-item"> <p>Tabbed content 3</p> </div> </div> </div>
4. Call the function on the parent container and setup the plugin.
$(".my-tabs").tabtab({ // SETUP OPTIONS HERE }) });
5. Add your own CSS styles to the tabs plugin.
.tabdemo ul { margin: 0; padding: 0 } .tabdemo .tab-content-item { max-width: 1250px } .my-tabs { margin: 0 auto } .my-tabs .tab-content-item { padding: 50px; background: #f9f9f9; -webkit-columns: 2; -moz-columns: 2; columns: 2; font-size: 19px; line-height: 32px } .my-tabs .tab-menu { margin-bottom: 50px; display: table; width: 100% } .my-tabs li { cursor: pointer; padding: 0 20px; display: table-cell; text-align: center } .my-tabs li:first-of-type { padding-left: 0 } .my-tabs li:last-of-type { padding-right: 0 } .my-tabs li a { background-color: #f9f9f9; border-radius: 1px; padding: 20px 40px; display: block } .my-tabs li.active a { background-color: #fff; border-radius: 1px; box-shadow: 0 2px 2px rgba(0,0,0,.33) } .my-tabs li a { text-decoration: none }
6. All the default options.
$(".my-tabs").tabtab({ // direct container of the tab menu items tabMenu: '.tabs__menu', // direct container of the tab content items tabContent: '.tabs__content', // next slide trigger next: '.tabs-controls__next', // previous slide trigger prev: '.tabs-controls__prev', // starting slide on pageload startSlide: 1, // keyboard arrow navigation arrows: true, // if true the height will dynamic and animated dynamicHeight: true, // disables animations. useAnimations: true, // http://julian.com/research/velocity/#easing easing: 'ease', // animation speed speed: 350, // delay the animation slideDelay: 0, // set 3D perspective perspective: 1200, // set the center point of the 3d animation transformOrigin: 'center top', // camera angle perspectiveOrigin: '50% 50%', // animate along the Y axis (val: px or ‘slide’) translateY: 0, // animate along the X axis (val: px or ‘slide’) translateX: 0, // animate scale (val: 0-2) scale: 1, // animate rotation (val: 0deg-360deg) rotateX: 90, // animate Y acces rotation (val: 0deg-360deg) rotateY: 0, // animate Y skew (val: 0deg-360deg) skewY: 0, // animate X skew (val: 0deg-360deg) skewX: 0, }) });
This awesome jQuery plugin is developed by gijsroge. For more Advanced Usages, please check the demo page or visit the official website.