jQuery Plugins › jQuery Other Plugins › jQuery Skeletabs

Accessible Responsive jQuery Tabs Plugin - Skeletabs

File Size: 297 KB
Views Total: 8636
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#tabs#responsive tabs
Accessible Responsive jQuery Tabs Plugin - Skeletabs

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.

<head>
  ...
  <link href="skeletabs.min.css" rel="stylesheet">
</head>

<body>
  ...
  <script src="//code.jquery.com/jquery.min.js"></script>
  <script src="dist/skeletabs.min.js"></script>
</body>

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

<div id="container">
  <!-- tabGroup -->
  <ul class="skltbs-tab-group">
    <!-- tabItem -->
    <li class="skltbs-tab-item">
      <!-- tab -->
      <button class="skltbs-tab">{{Tab 1}}</button>
    </li>
    <li class="skltbs-tab-item">
      <button class="skltbs-tab">{{Tab 2}}</button>
    </li>
  </ul>
  <!-- panelGroup -->
  <div class="skltbs-panel-group">
  <!-- panel -->
    <div class="skltbs-panel">{{Panel 1}}</div>
    <div class="skltbs-panel">{{Panel 2}}</div>
  </div>
</div>

3. Initialize the tabs plugin with default settings.

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

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

<!-- Default Options -->
<div data-skeletabs>
  ...
</div>

<!-- With Options -->
<div data-skeletabs data-skeletabs='{ "autoplay": true, "panelHeight": "adaptive" }'>
  ...
</div>

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

<!-- Light Theme -->
<div class="skltbs-theme-light">
  ...
</div>

<!-- Dark Theme -->
<div class="skltbs-theme-dark">
  ...
</div>

6. Apply a transition effect to the tabs plugin.

<!-- Fade -->
<div class="use-fade">
  ...
</div>

<!-- Fade Toggle -->
<div class="use-fade-toggle">
  ...
</div>

<!-- Drop -->
<div class="use-drop">
  ...
</div>

<!-- Rotate -->
<div class="use-rotate">
  ...
</div>

7. All default settings to customize the tabs plugin.

$("#container").skeletabs({

  // enable autoplay
  autoplay: false,
  autoplayInterval: 3000,
  pauseOnFocus: true,
  pauseOnHover: false,

  // breakpoint in pixels
  breakpoint: 640,

  // or 'destroy
  breakpointLayout: 'accordion',

  // default tab index
  startIndex: 0,

  // disabled tab index
  disableTab: null,

  // 'replace' | 'push' | false
  history: 'replace', 

  // 'select' | 'focus' | false
  keyboard: 'select', 
  keyboardAccordion: 'vertical',
  keyboardTabs: 'horizontal',

  // 'auto' | 'equal' | 'adaptive'
  panelHeight: 'auto', 
  
  // resize timeout in ms
  resizeTimeout: 100,

  // 'click' | 'hover'
  selectEvent: 'click', 

  // enable sliding accordion
  slidingAccordion: false,
  
  // animation duration in ms
  transitionDuration: 500

});

8. API methods.

// go to a specific tab
$('#container').skeletabs('goTo', 3);

// go to the panel that matches a given URL hash
$('#container').skeletabs('goTo', window.location.hash);

// go to the next tab
$("#container").skeletabs("next");

// go to the previous
$("#container").skeletabs("prev");

// add a new tab (panel)
$('#container').skeletabs('add', {
  tab: 'New tab',
  panel: '<p>Added a <strong>new tab</strong>.</p>'
});

// methods for autoplay
$("#container").skeletabs("play");
$("#container").skeletabs("pause");

// reload 
$("#container").skeletabs("reload");

// destroy the instance
$("#container").skeletabs("destroy");

// remove a tab (panel)
$('#container').skeletabs('remove', index);

// get the current info
$("#container").skeletabs("getCurrentInfo");

9. Events.

$('#container')
.on('skeletabs:move', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $nextPanel jQuery.Element — panel element we are moving onto
  // $nextTab jQuery.Element — tab element we are moving onto
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // nextIndex number — index of the tab we are moving onto
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})
.on('skeletabs:moved', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $previousPanel jQuery.Element — panel element we have moved from
  // $previousTab jQuery.Element — tab element we have moved from
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // nextIndex number — index of the tab we are moving onto
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})
.on('skeletabs:layoutchange', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})
.on('skeletabs:init', function(event, info) {
  // $container jQuery.Element — container element
  // $currentPanel jQuery.Element — currently active panel element
  // $currentTab jQuery.Element — currently active tab element
  // $nextPanel jQuery.Element — panel element we are moving onto
  // $nextTab jQuery.Element — tab element we are moving onto
  // $panels jQuery.Element — panel elements
  // $tabs jQuery.Element — tab elements
  // currentIndex number — currently active index
  // nextIndex number — index of the tab we are moving onto
  // currentLayout string — currently used layout ('tabs' or 'accordion')
  // size number — length of panels
})

Changelog:

v2.1.3 (2021-02-03)

  • Load proper jquery from global wrapper.

v2.1.2 (2020-12-07)

  • Add jquery@^1.12.0 as peerDependency. (Although skeletabs works with jquery versions down to v1.7.0, these versions are not compatible with the latest node.js engine during development.)

v2.1.1 (2020-11-10)

  • Add ability to deactivate below breakpoint

v2.0.0 (2020-08-20)

  • Drop IE8 support.
  • Support nested Skeletabs instances.
  • Auto init with data-skeletabs attribute of the container element.
  • Redesign keyboard functionality to meet WAI-ARIA 1.1 standards.
  • Add ability to dynamically add/remove panels.
  • Add ability to navigate back and forth via history API.
  • Add ability to pause autoplay while being hovered.
  • Add ability to destroy existing instances.
  • Turn off URL hash change while autoplaying.
  • Use debounce to limit the rate of layout changes for better performance.
  • Move starting index to next available one if startIndex and disableIndex conflict.
  • Handle required style changes with JS.
  • Add 2 new bundled themes: light, dark.
  • Options/Methods/Events/Classnames updated.

This awesome jQuery plugin is developed by findawayer. For more Advanced Usages, please check the demo page or visit the official website.