Accessible Responsive jQuery Tabs Plugin Skeletabs - Free Download Accessible Responsive jQuery Tabs Plugin - Skeletabs

Free Download Accessible Responsive jQuery Tabs Plugin – Skeletabs

Posted on

This time I will share jQuery Plugin and tutorial about Accessible Responsive jQuery Tabs Plugin – Skeletabs, hope it will help you in programming stack.

Accessible Responsive jQuery Tabs Plugin Skeletabs - Free Download Accessible Responsive jQuery Tabs Plugin - Skeletabs
File Size: 297 KB
Views Total: 5465
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Skeletabs is a full-featured jQuery tabs plugin for creating a responsive, accessible, customizable tab structure to switch between different sections of content.

Key features:

  • Fully accessible with keyboard interactions.
  • Fully responsive for small screen devices.
  • Autoplay.
  • Dark and Light themes.
  • Auto updates URL hashtags.
  • 4 CSS3 animations: “fade”, “fade-scale”, “drop”, “rotate”.
  • Equalizes the height of content sections.
  • Custom trigger events: ‘Click’ or ‘hover’.

Basic usage:

1. Include the stylesheet skeletabs.min.css in the head, and the JavaScript file skeletabs.min.js at the bottom of the webpage.

01 <head>
02   ...
03   <link href="skeletabs.min.css" rel="stylesheet">
04 </head>
05  
06 <body>
07   ...
08   <script src="//code.jquery.com/jquery.min.js"></script>
09   <script src="dist/skeletabs.min.js"></script>
10 </body>

2. The html structure for the tabs and tabbed panels.

01 <div id="container">
02   <!-- tabGroup -->
03   <ul class="skltbs-tab-group">
04     <!-- tabItem -->
05     <li class="skltbs-tab-item">
06       <!-- tab -->
07       <button class="skltbs-tab">{{Tab 1}}</button>
08     </li>
09     <li class="skltbs-tab-item">
10       <button class="skltbs-tab">{{Tab 2}}</button>
11     </li>
12   </ul>
13   <!-- panelGroup -->
14   <div class="skltbs-panel-group">
15   <!-- panel -->
16     <div class="skltbs-panel">{{Panel 1}}</div>
17     <div class="skltbs-panel">{{Panel 2}}</div>
18   </div>
19 </div>

3. Initialize the tabs plugin with default settings.

1 $('#container').skeletabs();

4. Or auto-init the tabs plugin by add the data-skeletabs attribute to the top container.

1 <!-- Default Options -->
2 <div data-skeletabs>
3   ...
4 </div>
5  
6 <!-- With Options -->
7 <div data-skeletabs data-skeletabs='{ "autoplay": true, "panelHeight": "adaptive" }'>
8   ...
9 </div>

5. Apply the Light or Dark theme to the tabs plugin.

1 <!-- Light Theme -->
2 <div class="skltbs-theme-light">
3   ...
4 </div>
5  
6 <!-- Dark Theme -->
7 <div class="skltbs-theme-dark">
8   ...
9 </div>

6. Apply a transition effect to the tabs plugin.

01 <!-- Fade -->
02 <div class="use-fade">
03   ...
04 </div>
05  
06 <!-- Fade Toggle -->
07 <div class="use-fade-toggle">
08   ...
09 </div>
10  
11 <!-- Drop -->
12 <div class="use-drop">
13   ...
14 </div>
15  
16 <!-- Rotate -->
17 <div class="use-rotate">
18   ...
19 </div>

7. All default settings to customize the tabs plugin.

01 $("#container").skeletabs({
02  
03   // enable autoplay
04   autoplay: false,
05   autoplayInterval: 3000,
06   pauseOnFocus: true,
07   pauseOnHover: false,
08  
09   // breakpoint in pixels
10   breakpoint: 640,
11  
12   // or 'destroy
13   breakpointLayout: 'accordion',
14  
15   // default tab index
16   startIndex: 0,
17  
18   // disabled tab index
19   disableTab: null,
20  
21   // 'replace' | 'push' | false
22   history: 'replace',
23  
24   // 'select' | 'focus' | false
25   keyboard: 'select',
26   keyboard<a href="https://www.jqueryscript.net/accordion/">Accordion</a>: 'vertical',
27   keyboardTabs: 'horizontal',
28  
29   // 'auto' | 'equal' | 'adaptive'
30   panelHeight: 'auto',
31    
32   // resize timeout in ms
33   resizeTimeout: 100,
34