Skip to main content

Initialization

info

Download the DHTMLX Tabbar package as a part of the DHTMLX Suite library

To add DHTMLX Tabbar into an application, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Tabbar</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="tabbar_container"></div>
        <script>
            // creating DHTMLX Tabbar
            const tabbar = new dhx.Tabbar("tabbar_container",{
                views:[ 
                    { tab: "north" },
                    { tab: "south" },
                    { tab: "east" },
                    { tab: "west" },
                ]
            });
        </script>
    </body>
</html>

Include source files​

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container​

Add a container for the Tabbar and give it an id, e.g. "tabbar_container":

<div id="tabbar_container"></div>

Define Tabbar structure​

At this step you should specify the structure of your future Tabbar. Each tab represents an object with attributes, such as the name of a tab and a CSS class applied to a tab. For example, Tabbar can have 4 tabs. You need to define their configuration objects and place them into the views array, like this:

const views = [
    { tab: "north" },
    { tab: "south" },
    { tab: "east" },
    { tab: "west" },
];

Initialize Tabbar​

Initialize Tabbar with the dhx.Tabbar object constructor. The constructor takes two parameters:

  • the HTML object on the page that serves as the Tabbar container
  • an object with configuration properties. If this argument is not passed to the constructor, the settings will be default
const tabbar = new dhx.Tabbar("tabbar_container",{
    mode: "bottom",
    views: views,
    // more config options
});

Configuration properties​

You can find the full list of Tabbar configuration properties in the Tabbar API overview article.

Example​