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.
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>
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
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.
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");
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():
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: [...]
});
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: [...]
});
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:
Tab DIVs attributes to use:
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 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 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
<html>
<head>
<script>
var myTabbar;
function doOnLoad() {
myTabbar = new dhtmlXTabBar({
// config here
});
}
</script>
</head>
<body onload="doOnLoad();">
</body>
</html>