Create Dynamic Tabs With Live Data – LiveTabs

Preview:

Description:

LiveTabs is a dynamic tab manager that allows you to dynamically create & delete tabs with live data just as browser tabs.

How to use it:

1. Import the LiveTabs library.

import { LiveTabs } from "../LiveTabs.js";

// or
<script src="./LiveTabs.js" ></script>

2. Load a theme of your choice in the document.

<link rel="stylesheet" href="./themes/theme1/theme1.css" />
<link rel="stylesheet" href="./themes/theme2/theme2.css" />
<link rel="stylesheet" href="./themes/theme3/theme3.css" />
<link rel="stylesheet" href="./themes/theme4/theme4.css" />
<link rel="stylesheet" href="./themes/theme5/theme5.css" />
<link rel="stylesheet" href="./themes/theme6/theme6.css" />

3. Initialize the LiveTabs library.

const config = {
      tabContainer :'liveTabs_Tabs',
      tabContentContainer:'LiveTabsContainer',
};
const NewTabs = new LiveTabs( config ,'NewTabs');

4. Create dynamic tabs using the createTab method.

NewTabs.createTab('Tab 1', 1 , ajaxContent('aboutPage' ,1 ));

5. Enable large tabs.

const config = {
      tabContainer :'liveTabs_Tabs',
      tabContentContainer:'LiveTabsContainer',
      largeTabs:true,
};

6. Enable fancy hover animations.

const config = {
      tabContainer :'liveTabs_Tabs',
      tabContentContainer:'LiveTabsContainer',
      animate:true
};