Just javascript tabs. Use it anywhere. No dependencies. Lightweight. Customizable.
npm install tabitJust javascript tabs. Use it anywhere. No dependencies. Lightweight. Customizable.
Examples: http://andrey-hohlov.github.io/tabit/
``
$ npm install tabit --save
`html`
Content of first tab
Content of second tab
Content of third tab
`javascript
import Tabit from 'Tabit'
const element = document.getElementById('tabs');
const options = {};
const tabit = new Tabit(element, options);
`
...or manually download and inject the minified script into your website.
`javascript`
{
buttonSelector: 'a',
contentSelector: 'div',
buttonAttribute: 'href',
contentAttribute: 'id',
buttonActiveClass: null,
contentActiveClass: null,
event: 'click',
activeIndex: 0,
toggleDisplay: true,
closable: false,
beforeInit: null,
onInit: null,
beforeChange: null,
onChange: null,
onDestroy: null
}
- buttonSelector - (string) CSS selector for tab button - trigger for change tabcontentSelector
- - (string) CSS selector for tab content blockbuttonAttribute
- - (string) attribute that contains a reference to the value of the contentAttribute, for href attribute will be removed first #
- - (string) attribute contains the value that is referred to by buttonAttribute
- - (string) class for active tab buttoncontentActiveClass
- - (string) class for active tab content blockevent
- - (string | array) event or events fired on tab button, support: click, mouseover, touchstart
- - (number) index of active tab on init, set -1 for no active tab toggleDisplay
- - (boolean) toggle css display property for tabs content blocks (display: none for inactive)closable
- - (boolean) close active tab after clickbeforeInit
- - (function) callback when instance created but not set active tab yet, arguments: Tabit instance
- - (function) callback after successfully init, arguments: Tabit instance
- - (function) callback before tab changed, arguments: current active tab, new tab, Tabit instance onChange
- - (function) callback after tab changed, arguments: new active tab, Tabit instance
- - (function) callback after instance destroyed
- next() - go to next tab, turn to first from lastprev()
- - go to previous tab, turn to last from firstgetActiveTab()
- - return active tabgetActiveTabIndex()
- - return active tab indexgetTab(index)
- - get tab by indexsetActiveTab(index)
- - set active tab by indexdestroy()
- - destroy Tabit instanceTabit.getInstance(element)
- - get Tabit instance from element
Works in IE 9 with Element.prototype.classList polyfill.
Find polyfills on polyfill.io.
`html
Content of first tab
Content of second tab
Content of third tab
javascript
new Tabit(
document.getElementById('tabs'),
{
buttonSelector: '[data-target]',
contentSelector: 'data-target',
buttonAttribute: '[data-content]',
contentAttribute: 'data-content',
}
);
`$3
javascript
new Tabit(
document.getElementById('tabs'),
{
contentActiveClass: 'is-active',
toggleDisplay: false
}
);
`css
div:not(.is-active) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}`$3
javascript
new Tabit(
document.getElementById('tabs'),
{
event: ['mouseover', 'click']
}
);
`$3
javascript
new Tabit(
document.getElementById('tabs'),
{
toggleDisplay: false,
onInit: function (instance) {
this.tabs.forEach(function (item, i) {
if (i !== 0) $(item.content).hide();
});
},
beforeChange: function (activeTab, newTab, instance) {
if (!activeTab) return; // no animate on init
$(activeTab.content)
.stop()
.fadeOut(function () {
$(newTab.content).stop().fadeIn()
});
}
}
);
`$3
javascript
var tabit = new Tabit(document.getElementById('tabs'));
var rotate = setInterval(function() {
tabit.next();
}, 2000)
`
Changelog
#### 2.2
- Add instance cache
- Add
#### 2.1
- Refactoring after code review
- Change options names
#### 2.0
- Full rewrite on ES6.
The MIT License
Copyright (c) 2017 Andrey Hohlov