Like with dhtmlxLayout, you can attach other DHTMLX components (including Layout) to tabbar tabs using apropriate methods. Example:

    var dhxGrid = tabbar.cells("tab1").attachGrid();

Get more details here: Attaching DHTMLX components to dhtmlxTabbar

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>

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

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:

• iframe - single iframe created and in content changed on active tab changing;
• iframes - iframes for each tab created and its content loaded at once;
• iframes-on-demand - iframes created only when tab activated.

If tabbar hrefmode set to “ajax” or “ajax-html”, tabbar will load content directly into the page (can contain inline 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:

• ajax - content is loaded from xml (see structure below);
• ajax-html - content is loaded from html file ( any response will be threated as HTML and inserted inside tabbar ).

The ajax mode is currently deprecated and supported just for backward compatibility, usage of ajax-html is preferable. In case of ajax-html mode , content can contain inline script blocks which will be evaluated on loading, but external script or css file referred from content will not be loaded.

For “ajax” mode, tabbar expects AJAX request to get XML of the following structure:

<?xml version="1.0"?>
<content>
<![CDATA[
    Here should be the content that you want to place. It can be html code or simple text.
]]>
</content>

It is possible to mix any href based loading mode and static HTML tabs. Please check the sample of source code below. It creates an AJAX based tabbar, which has static first page.

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