DHTMLX TabBar

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  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,#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:

• mode - tabbar orientation - top/bottom/left/right;
• tabheight - height of tab (not tab content);
• imgpath - path to folder with tabbar images;
• margin - space between tabs;
• align - tabs align - right/left;
• hrefmode - see Loading Content in IFrames and Loading Content with AJAX;
• offset - offset of first tab from edge;
• tabstyle - one of predefined styles: winDflt, winScarf, winBiScarf, winRound;
• select - id of selected tab;
• 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;
• width - width of tab in pixels;
• href - url of tab content;
• row - row index;
• onbeforeinit - action called exactly before tabbar creation ( samples/tab_content_auto3.html );
• oninit - action called exactly after tabbar creation ( samples/tab_content_auto3.html ).

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