DHTMLX Docs & Samples Explorer

Index
dhtmlxtabbar

## Working with dhtmlXTabBar

### Settings: Position, Align, Offset, Marging

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

### Skining: Colors, Predefined Skins

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>

### Normalization

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

### Manage TabBar and Tab Content Area Size

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

### Manage Each Tab with Script API

- Get/Set(change) label of tab:

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

- Show/Hide existing tab:

    <script>
      //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);
    </script>

- Add/Remove tab:

    <script>
      //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);
    </script>

- Disable/Enable tab:

    <script>
      //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);
    </script>

- Set/Get Active tab:

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