mgn-tab ( Don't Need jQuery )

Implement tab function.

• Target browser : IE9+
• In case of IE9, display tab without transition.

Install

npm i mgn-tab -S

Or Download raw data

↓ download "mgn-tab.js"

Import

import mgnTab from 'mgn-tab';

Constructor

new mgnTab(element [, option]);

|Argument|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |element|String|-(Required)|Specify target element.ex) ".j-tab"| |option|Object|-|ex) option = { fadeSpeed: 100, btnElm: "ul li a", detailElm: "div"}|

|Option|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |fadeSpeed|Number|0|Adjust display speed.| |btnElm|String|".j-tab_btn"(In case of “.j-tab”)|Specify element to be button.| |detailElm|String|".j-tab_detail"(In case of “.j-tab”)|Specify element to be content.|

Method

|Method|Argument|Descroption| |:-------|:--------|:------| |Open( element )|String|Open the tab designated by element.| |OpenEnd = function(){};|-|Execute after opening tab.|

Demo

https://frontend-isobar-jp.github.io/mgn-tab/

import mgnTab from 'mgn-tab';

let tab = new mgnTab('.j-tab');

//

let tab2 = new mgnTab(
    '.j-tab2',
    {
        fadeSpeed: 600
    }
);

tab2.Open( ".open" );

tab2.OpenEnd = function(){
    console.log("OpenEnd");
};