With Javascript constructor:

<script  src="../codebase/dhtmlxcommon.js"></script>
<script  src="../codebase/dhtmlxtabbar.js"></script>
 
<div id="a_tabbar" style="width:400;height:100"></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.

<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:390; height:390;"  skinColors="#FCFBFC,#F4F3EE" >
    <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>

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).

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.

<div id="a_tabbar" style="width:400;height:100"></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:400;height:100"></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).