Initialization

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

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxTabbar</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 dhtmlxTabbar
            var tabbar = new dhx.Tabbar("tabbar_container",{
                views:[ 
                    { tab: "left", css:"panel flex"},
                    { tab: "west", css:"panel flex"},
                    { tab: "east", css:"panel flex"},
                    { tab: "right", css:"panel flex"}
                ]
            });
</script> </body> </html>

Related sample:  Tabbar. Basic Initialization

Include source files

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:

var views = [
    { tab: "left", css:"panel flex"},
    { tab: "west", css:"panel flex"},
    { tab: "east", css:"panel flex"},
    { tab: "right", css:"panel flex"}
]

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 (see the full list below). If this argument is not passed to the constructor, the settings will be default
var tabbar = new dhx.Tabbar("tabbar_container",{
    mode:"bottom",
    views:views
});

Configuration properties

activeTab sets the currently active tab
closable adds close buttons into tabs
css the name of a CSS class(es) applied to Tabbar
disabled makes tabs disabled
mode specifies the mode of displaying a tabbar: "top"(default)|"bottom"|"left"|"right"
noContent defines whether tabs contain any content, false by default
tabHeight sets the height of a tab, 45 by default
tabWidth sets the width of a tab, 150 by default
views defines the configuration of tabs
Back to top