<div id="a_tabbar" style="width:400;height:100"></div>
<script>
            tabbar=new dhtmlXTabBar("a_tabbar","top"); //top,bottom,left,right
            tabbar.setImagePath("../codebase/imgs/");
 
 
            tabbar.setAlign("left"); //left,rigth,top,bottom
            tabbar.setMargin("2");
            tabbar.setOffset("5");
            tabbar.loadXML("tabs.xml");
</script>

Predefined Style Schemas: There are 4 predefined schemas for Tabbar (see sample):

• winDflt - Windows XP like (default style);
• winScarf - same with one splay adge;
• winBiScarf - same with two splay adges;
• winRound - rounded tabs.

To use necessary schema turn it on with setStyle method.

TabBar colors: You can define background colors for tabs using setSkinColors method, where first argument sets background for active tab, second - for other tabs.

<div id="a_tabbar" style="width:400;height:100"></div>
<script>
      tabbar=new dhtmlXTabBar("b_tabbar","top");
            tabbar.setImagePath("../codebase/imgs/");
 
 
            tabbar.setStyle("winScarf");
            tabbar.setSkinColors("#FFFF00","#FFFACD");
</script>

Also you can define custom color for each tab separately by using setCustomStyle command

  tabbar.setCustomStyle('a4',"#F5F5DC","#F0F8FF");

This command assign the normal state and selected states of tab with ID==a4 ( please beware that command can be used BEFORE tab created, if tab already exists style will be applied only on tab state changing - selecting|deselecting, or after tabbar “normalization” This command also allows to assign custom css styles for text labels inside tabbar.

  <style>
    .black_white{
      color:black;
      }
    .dhx_tab_element_inactive   .black_white{
      color:white;
      font-weight:bold;
      }
  </style>
  <script>
      tabbar2.setCustomStyle('a1','black','white',"black_white");
  </script>

In each moment of time tabbar can be reconstructed - this means the same tabbar with the same content and caption will be rebuild from scratch automatically. It can be used for

• adjusting tab caption sized to new tabbar size;
• automatically place tab captions on different rows to prevent scrolling;
• restoring correct layout after initialization in hidden container in Safari.

  //just rebuild tabbar, rows will be created automatically to prevent scrolling
  tabbar.normalize();
  //same as previous, but the width of row will be limited to 600px
  tabbar.normalize(600);
  //same as previous, tab caption size on last row will be changed to fill all row
  tabbar.normalize(600,true);

• Set tabs content area size depending on content size:

  //param 1 - adjust width automatically
  //param 2 - adjust height automatically
  tabbar.enableAutoSize(true,true);

• Set tabs content size depending on tabbar's container size (f.e. window size):

  tabbar.enableAutoReSize(true);

• Set fixed (minimal in case of AutoSize) size of tabbar:

  //param 1 - width
  //param 2 - height
  //param 3 - true means that given size is size of content area only  
  tabbar.setSize("200px","300px",true)

• Get/Set(change) label of tab:

  //param - tab ID
  tabbar.getLabel(tabId);
  //param 1 - tab ID
  //param 2 - label string
  tabbar.setLabel(tabId,"New tab Label");

• Show/Hide existing tab:

  //param 1 - tab ID
  //param 2 - if true, then selection from hidden tab should be moved to nearest one
  tabbar.hideTab(tab,true);
  //param 1 - tab ID
  tabbar.showTab(tabId);

• Add/Remove tab:

  //param 1 - tab ID
  //param 2 - new tab label
  //param 3 - size in px
  //param 4 - index in row (optional)
  //parma 5 - index of row (optional)
  tabbar.addTab(tabId,"Label",100,0,0);
  //param 1 - tab ID
  //param 2 - if true, then selection from deleted tab should be moved to nearest one
  tabbar.removeTab(tabId,true);

• Disable/Enable tab:

  //param 1 - tab ID
  //param 2 - if true, then selection from disabled tab should be moved to nearest one
  tabbar.disableTab(tabId,true);
  //param 1 - tab ID
  tabbar.enableTab(tabId);

Note, when you disable the tab it gets an additional CSS class assigned - dhx_tab_element_disabled.

• Set/Get Active tab:

  tabbar.getActiveTab();
  //param 1 - tab ID
  tabbar.setTabActive(tabId);