Accessible, Responsive, and Freely Redesign Tabs Plugin | Skeletabs

Skeletabs-jQuery-plugin

Skeletabs is an open-source jQuery plugin that provides a tabbed browsing feature for your web content.

It focuses on accessibility and scalability above all and is designed to support the convenience of screen readers and keyboard users, as well as to encourage creative uses for developers.

Key options:

  • Fully accessible through keyboard interactions.
  • Fully responsive to devices with small screens.
  • Auto Start.
  • Dark and light themes.
  • Automatic URL hashtag updates.
  • 4 CSS3 animations: “fade”, “fade-scale”, “drop” and “rotate”.
  • Equal to the height of the content sections.
  • Custom trigger events: “clicking” or “scrolling”.

Must Read: Bootstrap Responsive Navs and Tabs Plugin With jQuery

How to make use of it:

1. Include the stylesheet skeletabs.min.css within the head, and the JavaScript file skeletabs.min.js on 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 adding 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', 
  keyboard: '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 strategies.

// 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
})

See Demo And Download

Official Website(findawayer): Click Here

This superior jQuery/javascript plugin is developed by findawayer. For extra Advanced usage, please go to the official website.