Responsive Accessible Tabs Plugin For jQuery - aria-tabs
File Size: | 54.5 KB |
---|---|
Views Total: | 2622 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

aria-tabs is a lightweight jQuery plugin which helps you create a responsive, accessible tabs interface from plain HTML, with support for Aria attributes/roles and keyboard interactions.
How to use it:
1. Load the styelsheet aria-tabs.css
to provide the default CSS styles for the tabs interface.
<link rel="stylesheet" href="aria-tabs.css">
2. Create the tab navigation and tabbed panels following the html structure as this:
<div class="tab-group"> <nav class="tab-group__tab-nav"> <ul class="tab-group__tab-ul"> <li class="tab-group__tab-li"> <button type="button" class="tab-group__tab-btn">Tab 1</button> </li> <li class="tab-group__tab-li"> <button type="button" class="tab-group__tab-btn">Tab 2</button> </li> <li class="tab-group__tab-li"> <button type="button" class="tab-group__tab-btn">Tab 3</button> </li> </ul> </nav> <div class="tabs-group__tabs-cont"> <div class="tab-group__tabpanel"> <div class="tab-group__tab-content"> <h3>TAB 1</h3> </div> </div> <div class="tab-group__tabpanel"> <div class="tab-group__tab-content"> <h3>TAB 2</h3> </div> </div> <div class="tab-group__tabpanel"> <div class="tab-group__tab-content"> <h3>TAB 3</h3> </div> </div> </div> </div>
3. Load jQuery JavaScript library and the JavaScript aria-tabs.js
at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="aria-tabs.js"></script>
4. That's it. The plugin will automatically initialize the tabs interface on document ready. Here's a list of default settings which can be used to customize the tabs interface.
$('.tab-group').ariaTabs({ // Default CSS classes tabGroupIdPrefix: 'tab-group--', navClass: 'tab-group__tab-nav', listClass: 'tab-group__tab-ul', listItemClass: 'tab-group__tab-li', btnClass: 'tab-group__tab-btn', panelsContainerClass: 'tab-group__tabs-cont', panelClass: 'tab-group__tabpanel', contentClass: 'tab-group__tab-content', contentRole: 'document', btnSelectedClass: 'tab-group__tab-btn_selected', panelSelectedClass: 'tab-group__tabpanel_selected', // Enable vertical mode verticalMode: false, // Fade animation speed in milliseconds fadeSpeed: 300, // Enable CSS transitions cssTransitions: false });
Change log:
2018-01-15
- v2.0.0
This awesome jQuery plugin is developed by DavideTriso. For more Advanced Usages, please check the demo page or visit the official website.