dhtmlXTabBar Guide and Samples

Main features

Supported browsers

Working with dhtmlXTabBar

Initialize TabBar object from javascript constructor

With Javascript constructor:
<div id="a_tabbar" style="width:400px;height:100px"></div> <script type="text/javascript"> 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
Then you can load tabs from XML or add them with script

Initialize TabBar object from HTML structure

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 type="text/javascript" src="../js/dhtmlXCommon.js"></script> <script type="text/javascript" src="../js/dhtmlXTabbar.js"></script> <script type="text/javascript" src="../js/dhtmlXTabBar_start.js"></script> <div id="a_tabbar" class="dhtmlxTabBar" imgpath="../imgs/" style="width:390px; height:390px;" 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:
In this case the content of the tab should be placed inside tab DIV tags.

Building tabbar with Javascript

<div id="a_tabbar" style="width:400px;height:100px"></div> <script type="text/javascript"> 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:

Building tabar from XML

<div id="a_tabbar" style="width:400px;height:100px"></div> <script type="text/javascript"> 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:


<row> can contain tabs (in order to load more than one level at once) or not.
Mandatory parameters for this tag are:


Assigning content to tabs with Javscript

With Javascript: <div id="a_tabbar" style="width:400px;height:100px"></div> <div id="html_1" >Some content</div> <script type="text/javascript"> 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>

Assigning content to tabs in XML

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 content in IFrames

If tabbar hrefmode set to "iframe" or "iframes-on-demand", 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> Possible hrefmode values are:

Loading Content with AJAX

If tabbar hrefmode set to "ajax" or "ajax-html", tabbar will load content directly into the page (can contain javascript): <?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> Possible hrefmode values are:

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:400px;height:100px"></div> <script type="text/javascript"> 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):
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:400px;height:100px"></div> <script type="text/javascript"> tabbar=new dhtmlXTabBar("b_tabbar","top"); tabbar.setImagePath("../imgs/"); tabbar.setStyle("winScarf"); tabbar.setSkinColors("#FFFF00","#FFFACD"); </script>

Manage tabbar and tab content area 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 givven size is size of contnet area only tabbar.setSize("200px","300px",true)

    Manage each tab with script API

  • Get/Set(change) label of tab
  • <script type="text/javascript"> //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 type="text/javascript"> //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 type="text/javascript"> //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 type="text/javascript"> //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 type="text/javascript"> tabbar.getActiveTab(); //param 1 - tab ID tabbar.setTabActive(tabId); </script>