Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.editorconfig
.gitignore
LICENSE
README.md
gulpfile.js
index.html
package-lock.json
package.json

README.md

jquery.tabulation.js

One of simpliest jQuery plugins to include tabulation into your project

npm version

Requirements

  • jQuery

Installation

npm

npm i @suslov/jquery.tabulation

Old school

Download a library from dist/ folder

How to use

Check dist/index.html for example

  1. Create HTML structure
<div class="js-tabulation" data-tabulation-id="first"> <!-- Container -->

  <!-- Content -->
  <span data-tabulation-ref="first" data-tabulation-tab="1">Tab with index "1"</span>
  <span data-tabulation-ref="first" data-tabulation-tab="2">Tab with index "2"</span>
  <span data-tabulation-ref="first" data-tabulation-tab="3">Tab with index "3"</span>

  <!-- Navigation -->
  <span data-tabulation-ref="first" data-tabulation-nav="1">First</span>
  <span data-tabulation-ref="first" data-tabulation-nav="2">Second</span>
  <span data-tabulation-ref="first" data-tabulation-nav="3">Third</span>

</div>
  1. Initialize script

Simple

$('.js-tabulation').tabulation();

Options

$('.js-tabulation').tabulation({
  default: undefined, // Default tab to enable on startup
  nav: 'active', // Class for navigation if active
  tab: 'active', // Class for tab if active
  beforeSet: undefined, // Function before tab changed. Stops if return false
  afterSet: undefined // Function called after active tab changed
});
You can’t perform that action at this time.