dhtmlXTabBar Guide and Samples

Main features

  • Multibrowser/Multiplatform support
  • Full controll with JavaScript - wide API
  • Loading content with AJAX or in Iframes
  • Top, bottom, right and left oriented tabs
  • XML support
  • Fully customizable
  • Cool predefined skins
  • Multi-line tabbars
  • Scrollable
  • Easy initialization
  • Supported browsers

  • IE 5.x and above
  • Mozilla 1.4 and above
  • FireFox 0.9 and above
  • Opera (Xml loading depends on browser version)
  • Working with dhtmlXTabBar

    Initialize TabBar object on page

    With Javascript constructor:
    <div id="a_tabbar" style="width:400;height:100"></div> <script> tabbar=new dhtmlXTabBar("a_tabbar"); tabbar.setImagePath("../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


  • 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="../js/dhtmlXCommon.js"></script> <script src="../js/dhtmlXTabbar.js"></script> <script src="../js/dhtmlXTabBar_start.js"></script> <div id="a_tabbar" class="dhtmlxTabBar" imgpath="../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:
  • imgpath - path to folder with tabbar images
  • 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

  • In this case the content of the tab should be placed inside tab DIV tags.

    Initializing tabs from Javascript

    <div id="a_tabbar" style="width:400;height:100"></div> <script> tabbar=new dhtmlXTabBar("a_tabbar","top"); tabbar.setImagePath("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
  • Initializing tabs from XML

    <div id="a_tabbar" style="width:400;height:100"></div> <script> tabbar=new dhtmlXTabBar("a_tabbar","top"); tabbar.setImagePath("../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 or iframe. Defines the way of loading tab page content.


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


  • 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("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>

    With XML <?xml version="1.0"?> <tabbar> <row> <tab id="a1" width='200px'>Tab 1-1 <content> <![CDATA[<img src='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>

    Loading contant in IFrames

    If tabbar hrefmode set to "iframe", tabbar will load content in iframes (which will be created automatically) <?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>

    Loading Content with AJAX

    If tabbar hrefmode set to "iframe", tabbar will load content directly into the page: <?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>

    In this case Tabbar expects AJAX request to get XML of the following structure: <?xml version="1.0"?> <data> <![CDATA[ Here should be the content that you want to place. It can be html code or simple text. ]]> </data>

    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("../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("../imgs/"); tabbar.setStyle("winScarf"); tabbar.setSkinColors("#FFFF00","#FFFACD"); </script>