Initializing Tabbar

Tabbar source files

To start working with dhtmlxTabbar, you need to include tabbar js/css files on a page.

In order to use dhtmlxTabbar as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtabbar.css">
    <script src="codebase/dhtmlxtabbar.js"></script>
</head>

If you use dhtmlxTabbar as a part of "dhtmlxSuite" package, you need to have 2 files included:

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

dhtmlxtabbar.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Constructor

After you've included the necessary source files, you can initialize Tabbar object.

var myTabbar = new dhtmlXTabBar({
 
    parent:             "tabbarObj",    // id/object, container for tabbar 
    skin:               "dhx_skyblue",  // string, optional, tabbar skin
    mode:               "top",          // string, optional, top or bottom tabs mode
    align:              "left",         // string, optional, left or right tabs align
    close_button:       true,           // boolean, opt., render Close button on tabs
    content_zone:       true,           // boolean, opt., enable/disable content zone
    xml:                "tabbar.xml",   // string, optional, path to XML config 
    json:               "tabbar.json",  // string, optional, path to JSON config 
    onload:             function(){},   // function, optional, callback for XML/JSON
    arrows_mode:        "auto"          // mode of showing tabs arrows (auto, always)
 
    tabs: [ // tabs config
 
        {
            id:      "a1",      // tab id
            text:    "Text",    // tab text
            width:   null,      // numeric for tab width or null for auto, optional
            index:   null,      // numeric for tab index or null for last position,opt.
            active:  true,      // boolean, make tab active after adding, optional
            enabled: false,     // boolean, false to disable tab on init
            close:   true       // boolean, render close button on tab, optional
        },
        {...},  // other tabs if any
        {...}
 
    ]
 
});

1) the order of loading (if several params specified at a time) is: json, xml, tabs

2) tabs: [{close: true/false}] override close_button params, i.e. if you set close_button:true, all tabs will have a close button. To hide this button for the specified tab, you need to set tabs: [{close: false}]

3) content_zone implies the area below tabs (or the above one for the mode: "bottom") where the attached content is located. You can disable it and show any other content

Full-screen init

Generally, to create a full-screen tabbar on a page, use the code as in:

<html>
<head>
<style>
    /* important to set width/heigth to 100% for fullscreen init */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
    }
</style> <script>
    var myTabbar;
    function doOnLoad() {
        myTabbar = new dhtmlXTabBar({
            parent: document.body,  // parent container
            tabs: [...]             // tabs and other config
        });
    }
</script> </head> <body onload="doOnLoad();">   </body> </html>

It's also possible to set offsets for Tabbar in the full screen mode.

Init in an HTML element

To initialize dhtmlxTabbar in an HTML element, do the following:

1) create an HTML element where the tabbar will be placed later, do not forget to specify width and height:

<div id="tabbarObj" style="position: relative; width: 400px; height: 300px;"></div>

2) create a dhtmlXTabBar object and place it into the HTML object that you've just created:

var myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",    // id or object for parent container
    tabs: [...]             // tabs and other config
});
//or
var myTabbar = new dhtmlXTabBar({
    parent: document.getElementById("tabbarObj"),
    tabs: [...]
});
// old way still works
var myTabbar = new dhtmlXTabBar("tabbarObj");

Init in a window

To create a tabbar in a window, do the following:

1) create a dhtmlXWindows object:

var dhxWins = new dhtmlXWindows();
var tabbarWin = dhxWins.createWindow("w1", 20, 20, 600, 400);

The following parameters are passed to dhxWins.createWindow():

  • w1 - the id of the window;
  • 20, 20 - the left and the top positions of the window;
  • 600, 400 - the width and the height of the window.

2) call the attachTabbar method to render tabbar in the window:

var myTabbar = tabbarWin.attachTabbar();
// or with more extended config
var myTabbar = tabbarWin.attachTabbar({
    tabs: [...]
});

Init in a cell of layout

To create a new tabbar in a cell of a layout, do the following:

1) create a dhtmlXLayoutObject object:

var myLayout = new dhtmlXLayoutObject({
    parent: "layoutObj",
    pattern: "3L"
});

2) attach tabbar to a cell of layout with the attachTabbar method:

var myTabbar = myLayout.cells("a").attachTabbar();
// or with more extended config
var myTabbar = myLayout.cells("a").attachTabbar({
    tabs: [...]
});

Init tabbar from html

All you need is to specify class="dhtmlxTabBar" of the div element which is container for the tabbar, and tabbar object will be initialized inside automatically.

<head>
    <script>
        function doOnInit(){
            // tabbar inited and ready
            // your code here
        }
</script> <head> <body> <div id="myTabbar" class="dhtmlxTabBar" style="width:390px; height:390px;" oninit="doOnInit()"> <div id="a1" name="Tab 1">Content 1</div> <div id="a2" name="Tab 2">Content 2</div> <div id="a3" name="Tab 3">Content 3</div> </div> </body>

Container DIV attributes to use:

  • mode - tabs orientation - top/bottom;
  • align - tabs align - right/left;
  • select - id of selected tab;
  • onbeforeinit - action called exactly before tabbar creation ( samples/tab_content_auto3.html );
  • oninit - action called exactly after tabbar creation ( samples/tab_content_auto3.html ).


Tab DIVs attributes to use:

  • id - tab id;
  • name - tab text;
  • width - width of tab in pixels;
  • href - url of tab content;
  • onbeforeinit - action called exactly before tabbar creation;
  • oninit - action called exactly after tabbar creation

In this case the content of the tab should be placed inside tab DIV tags.

After tabbar is initialized you can work with it from script using its id (id attribute of container DIV) as object reference. In sample above it will work as follows:

myTabbar.tabs("a2").setActive();

JSON struct

JSON struct is needed for json init. In this case tabbar can load config and partially data from an external json file.

It is used for the following init:

var myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",
    json: "tabbar.json",
    onload: function(){
        console.log("JSON has been loaded and tabs are rendered. Ready to work.");
    }
});
// or
var myTabbar = new dhtmlXTabBar("tabbarObj");
myTabbar.loadStruct("tabbar.json");


tabbar.json content

{
    settings: {
        align:              "right",        // tabs align, optional
        skin:               "dhx_skyblue",  // skin, optional
        close_button:       true,           // render closing button on tabs, optional
        hrefmode:           "ajax"          // load hrefs via ajax, optional
    },
    tabs: [
        {
            id:      "a1",      // tab id
            text:    "Text",    // tab text
            width:   null,      // numeric for tab width or null for auto, optional
            index:   null,      // numeric for tab index or null for last position, optional
            active:  true,      // boolean, make tab active after adding, optional
            enabled: false,     // boolean, false to disable tab on init
            close:   true       // boolean, render close button on tab, optional
        },
        {}, // more tabs if any
        {}
    ]
}

XML struct

XML struct is needed for xml init. In this case tabbar can load config and partially data from an external xml file.

It's used for the following init

var myTabbar = new dhtmlXTabBar({
    parent: "tabbarObj",
    xml: "tabbar.xml",
    onload: function(){
        console.log("XML has been loaded and tabs are rendered. Ready to work.");
    }
});
// or
var myTabbar = new dhtmlXTabBar("tabbarObj");
myTabbar.loadStruct("tabbar.xml");


tabbar.xml content

<?xml version="1.0"?>
<tabbar skin="dhx_skyblue" align="left" closeButton="1" hrefmode="ajax">
    <tab id="a1" width="auto" close="1" enabled="0" active="1" href="url">
    Tab text
        <content>
        This content will be attached to a tab via attachHTMLString()
        </content>
    </tab>
    ... more tabs if any
</tabbar>
 
<!-- tabbar common -->
skin            tabbar skin, optional
align           tabs align, optional
closeButton     render closing button on tabs
hrefmode        set to "ajax" to load herfs via ajax, optional
 
<!-- tabs -->
id              tab id
width           numeric for tab width or auto, optional
close           render close button on tab, optional
enabled         tab can be disabled on init, optional
active          make tab active on init, optional
href            load url into tab after adding via attachURL

Recommended init way

<html>
<head>
<script>
    var myTabbar;
    function doOnLoad() {
        myTabbar = new dhtmlXTabBar({
            // config here
        });
    }
 
</script>
</head>
<body onload="doOnLoad();">
 
</body>
</html>
Back to top