dhtmlxTabbar

1.       Tabbar initialization
a.       Initialize TabBar Object from 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>
 
b.       Initialize tabbar object from html structure
<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,#F 4F3EE" >
    <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>
 
       c.  Building tabbar with javascript
<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>
 
       d. Building tabbar from xml
<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>
 
              Tabs.xml:
<?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>
 
 
2. Content loading
       a. Assigning content to tabs with javascript
<div id="a_tabbar" style="width:400;height:100"></div>
<div id="html_1" >Some content</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.setContent("a1","html_1");
            tabbar.setContentHTML("a2","<br/>The content can be set as...
</script>
 
       b. assigning content to tabs in xml
<?xml version="1.0"?>
<tabbar>
    <row>
        <tab id="a1" width='200px'>Tab 1-1
            <content>
                <![CDATA[{{dhtmlxTabbar:imgs/page_a.gif'}}]]>
            </content>
        </tab>
        <tab id="a2" width='200px'>Tab 1-2
            <content>
                <![CDATA[
          <table>
            <tr><td>Some data</td></tr>
          </table>
        ]]>
            </content>
        </tab>
    </row>
</tabbar>
 
       c. loading content in iframes
<?xml version="1.0"?>
<tabbar  hrefmode="iframe">
    <row>
        <tab id="b1" width='100px' href="http://groups.google.com">Google groups</tab>
        <tab id="b2" width='100px' selected="1" href="http://google.com">Google search</tab>
    </row>
</tabbar>
 
       d. loading content with ajax
<?xml version="1.0"?>
<tabbar  hrefmode="ajax">
    <row>
        <tab id="b1" width='100px' selected="1"  href="slow_ajax.php?num=1">SCBR 1</tab>
        <tab id="b2" width='100px' href="slow_ajax.php?num=2">SCBR 2</tab>
        <tab id="b3" width='100px' href="slow_ajax.php?num=3">SCBR 3</tab>
    </row>
</tabbar>
 
       e. mixed loading mode
  <script>
    tabbar=new dhtmlXTabBar("a_tabbar","top");
    tabbar.setImagePath("../codebase/imgs/");
    tabbar.setHrefMode("ajax-html");
    tabbar.setSkinColors("#FCFBFC","#F4F3EE");
    tabbar.addTab("a1","Static","100px");
    tabbar.addTab("a2","AJAX","100px");
    tabbar.setContentHTML("a1","Some static text here");
    tabbar.setContentHref("a2","http://some.url/here");
    tabbar.setTabActive("a1");
  </script>
 
 
3. Working with dhtmlxTabBar
       a. setting: 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>
 
       b. skining: colors, predefined skins
<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>
Note: tabbar colors: the first argument sets background for active tab, second - for other tabs
Also you can define custom color for each tab separately by using setCustomStyle command.
                     tabbar.setCustomStyle('a4',"#F5F5DC","#F0F8FF");
 
       c. Normallization
  //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);
 
       d. 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:
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)
 
       e. 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>
 
 
4. Special modes in tabbar
       Closing button for each tab
tabbar.enableTabCloseButton(true)
 
       Extended hide mode
tabbar.enableForceHiding(true)
 
 
5. Events Handling
onTabClose - occurs when tab closed by close button
          tabbar.attachEvent("onTabClose", function(id){
              //any custom code
              return true;
          });
         Note: id – id of tab which is closing.
 
       onSelect – occurs when tab selected.
          tabbar.attachEvent("onSelect", function(id,last_id){
              //any custom code
              return true;
          });
              Note: id – id of selected tab
              Last_id – id of previously selected tab
 
       onXLS – occurs when xml loading started
          tabbar.attachEvent("onXLS", function(){
              //any custom code
          });
 
       OnXLE – occurs when xml loading finished
          tabbar.attachEvent("onXLE", function(){
              //any custom code
          });
 
       onTabContentLoaded – occurs when content of tab loaded (for ajax – html mode only)
          tabbar.attachEvent("onTabContentLoaded", function(id){
              //any custom code
              return true;
          });
 
 
       Attaching event handler
tabbar.attachEvent(evName, evHandler);
              note: evName – name of the event;
                     evHandler – user-defined event handler.
     
       Removing event handler
        var id = tabbar.attachEvent(evName, evHandler);
        //...
        tabbar.detachEvent(id); // unique id of the event handler
 
 
6. Attaching DHTMLX Components
       Attaching components to tabbar’s cells
dhtmlxTree;
dhtmlxGrid;
dhtmlxTreeGrid;
dhtmlxTabbar;
dhtmlxAccordion;
dhtmlxFolders;
dhtmlxMenu;
dhtmlxToolbar;
dhtmlxEditor;
dhtmlxLayout;
Status Bar.
 
       Attaching Tree
    <script>
        tabbar.addTab("tab1","First tab","100px");
        var dhxTree = tabbar.cells("tab1").attachTree();
    </script>
 
       Attaching other dhtmlx components
    <script>
        var dhxGrid = tabbar.cells("tab1").attachGrid();
        var dhxTreeGrid = tabbar.cells("tab1").attachGrid();
        var dhxTabbar = tabbar.cells("tab1").attachTabbar();
        var dhxAccord = tabbar.cells("tab1").attachAccordion();
        var dhxFolders = tabbar.cells("tab1").attachFolders();
        var dhxMenu = tabbar.cells("tab1").attachMenu(); 
        var dhxBar = tabbar.cells("tab1").attachToolbar();
        var dhxEditor = tabbar.cells("tab1").attachEditor();
        var db = tabbar.cells("tab1").attachStatusBar();
    </script>
      Note: if you want to attach dhtmlxGrid with paging to the dhtmlxTabbar tab you should use setContent() method to attach container with grid and paging area:
tabbar.setContent("a1","paging_container");