LiveTabs: JavaScript Library To Create Dynamic Tabs

Category: JavaScript/jQuery Plugins | July 4, 2021
Author: Apaland
Official Page: Go to website
Last Update: July 4, 2021
License: MIT

javascript dynamic tabs

Description:

LiveTabs is a JavaScript library that allows you to create and manage dynamic tabs in your application just like modern web browsers. LiveTabs was initialy created for reading RSS feeds to show the different news in tabs at the same time and now, avaiable on the GitHub with MIT license so anyone can use. LiveTabs is created using JavaScript, Bootstrap, HTML and CSS. And the best thing is, there are multiple themes avaialable in this library so, you have options avaialable to choose as per your need and if you want, you can customize the theme also.

How can I create dynamic tabs using JavaScript?

In order to create dynamic tabs using JavaScript, you need to follow below steps.

Step1: Include the library in your application.

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

Or, you can include with other method.

import { LiveTabs } from LiveTabs.js

Step2: You will need to create instance of LiveTabs library and configure like this.

const config = {
    //name of the Tab div
    tabContainer :'liveTabs_Tabs',

    //name of the content div
    tabContentContainer:'LiveTabsContainer'
}
const NewTabs = new LiveTabs( config ,'NewTabs');

Step3: To create dynamic tabs, you need to use createTab method.

//Syntax
NewTabs.createTab( title , tabId , callback);

//Example
NewTabs.createTab('Title', 1 , ajaxContent('aboutPage' ,1 ));
  • title: title of the tab
  • tabId: unique number for each tab
  • callback: a callback function

Step4: Load the theme of your choice. there are total six themes avaialable.

<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" />

🙂 .