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.