With Javascript constructor:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlxtabbar.css">
<script  src="../codebase/dhtmlxcommon.js"></script>
<script  src="../codebase/dhtmlxtabbar.js"></script>
 
<div id="a_tabbar" style="width:400px;height:100px"></div>
<script>
            tabbar=new dhtmlXTabBar("a_tabbar");
            tabbar.setImagePath("../codebase/imgs/");
</script>

Parameters passed to the constructor are: object to attach tabbar to (should be loaded before calling constructor) Specify Additional parameters of the tabbar: setImagePath(url) - method specifies the path to the folder with tree icons Then you can load tabs from XML or add them with script

Without Javascript code: You do not need to write a line of javascript code if you include dhtmlxtabbar_start.js into the page. 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.

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlxtabbar.css">
<script  src="../codebase/dhtmlxcommon.js"></script>
<script  src="../codebase/dhtmlxtabbar.js"></script>
<script  src="../codebase/dhtmlxtabbar_start.js"></script>
<div id="a_tabbar" class="dhtmlxTabBar" imgpath="../codebase/imgs/" style="width:390px; height:390px;"  skinColors="#FCFBFC,#F4F3EE"  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>
<script>
   function doOnInit(){
      a_tabbar.setTabActive('a2');
   }
</script>

Container DIV attributes to use:

• mode - tabbar orientation - top/bottom/left/right;
• tabheight - height of tab (not tab content);
• imgpath - path to folder with tabbar images;
• margin - space between tabs;
• align - tabs align - right/left;
• hrefmode - see Loading Content in IFrames and Loading Content with AJAX;
• offset - offset of first tab from edge;
• tabstyle - one of predefined styles: winDflt, winScarf, winBiScarf, winRound;
• select - id of selected tab;
• skinColors - list of two background colors - for active(1) and other tabs(2), like ”#ffdead,#f5fffa”;
• style - you should specify width and height of tabbar area (with content).
• 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 - identifier of tab;
• name - tab label;
• width - width of tab in pixels;
• href - url of tab content;
• row - row index;
• onbeforeinit - action called exactly before tabbar creation ( samples/tab_content_auto3.html );
• oninit - action called exactly after tabbar creation ( samples/tab_content_auto3.html ).

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:

    a_tabbar.setTabActive('a2');

<div id="a_tabbar" style="width:400px;height:100px"></div>
<script>
            tabbar=new dhtmlXTabBar("a_tabbar","top");
            tabbar.setImagePath("../codebase/imgs/");
 
 
            tabbar.addTab("a1","Tab 1-1","100px");
            tabbar.addTab("a2","Tab 1-2","100px");
            tabbar.addTab("a3","Tab 1-3","100px");
</script>

Parametrs:

• tab identifier;
• title/label;
• width.

<div id="a_tabbar" style="width:400px;height:100px"></div>
<script>
            tabbar=new dhtmlXTabBar("a_tabbar","top");
            tabbar.setImagePath("../codebase/imgs/");
            tabbar.loadXML("tabs.xml");
</script>

XML Syntax:

<?xml version="1.0"?>
<tabbar>
    <row>
        <tab id="a1" width='200px'>Tab 1-1</tab>
        <tab id="a2" width='200px'>Tab 1-2</tab>
    </row>
    <row>
        <tab id="b1" width='150px'>Tab 2-1</tab>
        <tab id="b2" width='100px' selected="1">Tab 2-2</tab>
        <tab id="b3" width='150px'>Tab 2-3</tab>
    </row>
</tabbar>

In PHP script use the following code for page header:

<?php
  if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
      header("Content-type: application/xhtml+xml"); } else {
      header("Content-type: text/xml");
  }
  echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>

<tabbar> node is mandatory. It specifies the parent of loading block of data. Possible properties:

• hrefmode - optional. Possible values are: ajax/ajax-html or iframe/iframe-on-demand. Defines the way of loading tab page content;
• margin - space between tabs;
• align - align of tabs group - left/right;
• offset - offset of first tabs from edge;
• tabstyle - one of predefined styles: winDflt, winScarf, winBiScarf, winRound;
• skinColors.

<row> can contain tabs (in order to load more than one level at once) or not. Mandatory parameters for this tag are:

• width - width (height) of tab, * - mean automatic size detection;
• id - id of the node.

Optional:

• selected - to set tab active. This attribute should be set to single tab in tabbar;
• href - url of the page to load under this tab (depending of tabbar/hrefmode it will use ajax or iframe).