Accessible Responsive jQuery Tabs Plugin - Skeletabs

Accessible Responsive jQuery Tabs Plugin - Skeletabs
File Size: 53.8 KB
Views Total:
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.
  • 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="skltbs-demo" class="skltbs">
  <ul role="tablist" class="skltbs-tab-group">
    <li role="presentation" class="skltbs-tab-item">
      <a role="tab" class="skltbs-tab" href="#skltbs-demo1">Tab 1</a>
    </li>
    <li role="presentation" class="skltbs-tab-item">
      <a role="tab" class="skltbs-tab" href="#skltbs-demo2">Tab 2</a>
    </li>
    <li role="presentation" class="skltbs-tab-item">
      <a role="tab" class="skltbs-tab" href="#skltbs-demo3">Tab 3</a>
    </li>
  </ul>
  <div class="skltbs-panel-group">
    <div role="tabpanel" id="skltbs-demo1" class="skltbs-panel">
      Panel 1
    </div>
    <div role="tabpanel" id="skltbs-demo2" class="skltbs-panel">
      Panel 2
    </div>
    <div role="tabpanel" id="skltbs-demo3" class="skltbs-panel">
      Panel 3
    </div>
  </div>
</div>

3. Initialize the tabs plugin with default settings.

$("#skltbs-demo").skeletabs();

4. All default settings to customize the tabs plugin.

$("#skltbs-demo").skeletabs({

  // "fade", "fade-scale", "drop", "rotate"
  animation: null,

  // enable autoplay
  autoplay: false,
  autoplayInterval: 3000,

  // default CSS classes
  classes: {
      container: "skltbs",
      tabGroup: "skltbs-tab-group",
      tabItem: "skltbs-tab-item",
      tab: "skltbs-tab",
      panelGroup: "skltbs-panel-group",
      panel: "skltbs-panel",
      accordionHeading: "skltbs-panel-heading",
      isActive: "is-active",
      isDisabled: "is-disabled",
      isGettingIn: "is-getting-in",
      isGettingOut: "is-getting-out",
      hasAnimation: "has-animation"
  },

  // default tab
  defaultTab: 1,

  // disabled tab
  disableTab: null,

  // enable equal height
  equalHeights: false,

  // enable extended keyboard interactions
  extendedKeyboard: true,

  // responsive options
  responsive: {
      breakpoint: 640,
      headingTagName: "div"
  },

  // or 'hover'
  triggerEvent: "click",

  // enable hashtag support
  updateUrl: true

});

5. API methods.

// get the current tab
$("#skltbs-demo").skeletabs("getCurrentTab");

// get the current panel
$("#skltbs-demo").skeletabs("getCurrentPanel");

// start autoplay
$("#skltbs-demo").skeletabs("startRotation");

// stop autoplay
$("#skltbs-demo").skeletabs("stopRotation");

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