Create Dynamic Tabs With Live Data – LiveTabs

Category: Javascript | July 3, 2021
Author:Apaland
Views Total:134 views
Official Page:Go to website
Last Update:July 3, 2021
License:MIT

Preview:

Create Dynamic Tabs With Live Data – LiveTabs

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
};

You Might Be Interested In:


Leave a Reply