<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>DHTML TabBar guide and samples</title>
<style type="text/css">
body {font-family:arial;font-size:14px;line-height:18px;}
h2 {cursor:pointer;font-size:20px;margin:30px 0px 40px 5px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
a h4{
color:blue;
font-weight:bold;
}
.op {cursor:pointer;}
div.block {margin-left:5px;}
xmp {color:green;font-size:12px;margin:0;font-family:courier;background-color:#e6e6fa;padding:2px}
li {margin-top:2px;}
</style>
</head>
<body>
<h2><a href="http://www.scbr.com/docs/products/dhtmlxTabBar/index.shtml" target="_top" title="Visit javascript tabbar home page">dhtmlXTabBar</a> Guide and Samples</h2>
<div class="block">
<!--- --->
<a name="mf"><h3 >Main features</h3
></a><div style="display:show" class="block">
<ul>
<li>Multibrowser/Multiplatform support </li>
<li>xHTML compatible</li>
<li>Full controll with JavaScript - wide API</li>
<li>Loading content with AJAX or in Iframes</li>
<li>Top, bottom, right and left oriented tabs</li>
<li>XML support</li>
<li>Fully customizable</li>
<li>Cool predefined skins</li>
<li>Multi-line tabbars</li>
<li>Scrollable</li>
<li>Easy initialization</li>
</ul>
</div>
<a name="browsers"><h3 >Supported browsers</h3
></a><div style="display:block" class="block">
<ul>
<li>IE 5.x and above</li>
<li>Mozilla 1.4 and above</li>
<li>FireFox 0.9 and above</li>
<li>Opera (Xml loading depends on browser version)</li>
</ul>
</div>
<h3 >Working with dhtmlXTabBar</h3
><div style="display:show" class="block">
<!--- Initialize object on page --->
<a name="init"><h4>Initialize TabBar object from javascript constructor</h4
></a><div class="block">
<strong>With Javascript constructor:</strong><br>
<XMP>
<div id="a_tabbar" style="width:400px;height:100px"></div>
<script type="text/javascript">
tabbar=new dhtmlXTabBar("a_tabbar");
tabbar.setImagePath("../imgs/");
</script>
</XMP>
Parameters passed to the constructor are:
<ul>
<li>object to attach tabbar to (should be loaded before calling constructor)</li>
Specify Additional parameters of the tabbar:
<li>setImagePath(url) - method specifies the path to the folder with tree icons</li>
</ul>
</div>
Then you can load tabs <a href="#xmlinit">from XML</a> or add them <a href="#scriptinit">with script</a>
</div>
<a name="inithtml"><h4 >Initialize TabBar object from HTML structure</h4
></a><div class="block">
<strong>Without Javascript code:</strong><br>
You do not need to write a line of javascript code if you include <em>dhtmlXTabBar_start.js</em>
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.
<XMP>
<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>
</XMP>
<br>
<em>Container DIV attributes to use:</em>
<ul>
<li>mode - tabbar orientation - top/bottom/left/right</li>
<li>tabheight - height of tab (not tab content)</li>
<li>imgpath - path to folder with tabbar images</li>
<li>margin - space between tabs</li>
<li>align - tabs align - right/left</li>
<li>hrefmode - see <a href="#ifrmode">Loading contant in IFrames</a> and <a href="ajaxmode">Loading Content with AJAX</a></li>
<li>offset - offset of first tab from edge.</li>
<li>tabstyle - one of predefined styles: winDflt, winScarf, winBiScarf, winRound</li>
<li>select - if tab selected</li>
<li>skinColors - list of two background colors - for active(1) and other tabs(2), like "#ffdead,#f5fffa"</li>
<li>style - you should specify width and height of tabbar area (with content)</li>
<li></li>
<br>
<em>Tab DIVs attributes to use:</em>
<li>id - identifier of tab</li>
<li>name - tab label</li>
<li>width - width of tab in pixels</li>
<li>href - url of tab content</li>
<li>row - row index</li>
</ul>
<br>
In this case the content of the tab should be placed inside tab DIV tags.
</div>
<!--- Initializing tabs from Javascript --->
<a name="scriptinit"><h4>Building tabbar with Javascript</h4></a>
<div class="block">
<XMP>
<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>
</XMP>
Parametrs:
<ul>
<li type="circle">tab identifier</li>
<li type="circle">title/label</li>
<li type="circle">width</li>
</ul>
</div>
<!--- Initializing tabs from XML --->
<a name="xmlinit"><h4>Building tabar from XML</h4
></a><div class="block">
<XMP>
<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>
</XMP>
<br><br>
<strong>XML Syntax:</strong>
<XMP>
<?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>
</XMP>
<br>
In <strong>PHP</strong> script use the following code for page header:<br>
<xmp>
<?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");
?>
</xmp>
<br>
<strong><tabbar></strong> node is mandatory. It specifies the parent of loading block of data.<br>
Possible properties:<br>
<ul>
<li><em>hrefmode</em> - optional. Possible values are: ajax/ajax-html or iframe/iframe-on-demand. Defines the way of loading tab page content.</li>
<li><em>margin</em> - space between tabs</li>
<li><em>align</em> - align of tabs group - left/right</li>
<li><em>offset</em> - offset of first tabs from edge</li>
<li><em>tabstyle</em> - one of predefined styles: winDflt, winScarf, winBiScarf, winRound</li>
<li><em>skinColors</em></li>
</ul>
<br><br>
<strong><row></strong> can contain tabs (in order to load more than one level at once) or not.<br>
Mandatory parameters for this tag are:<br>
<ul>
<li><em>width</em> - width (height) of tab</li>
<li><em>id</em> - id of the node</li>
<br>Optional:
<li><em>selected</em> - to set tab active. This attribute should be set to single tab in tabbar.</li>
<li><em>href</em> - url of the page to load under this tab (depending of tabbar/hrefmode it will use ajax or iframe)</li>
</ul>
<br><br>
</div>
<!--- Assigning content to tabs --->
<a name="contentjs"><h4 >Assigning content to tabs with Javscript</h4
></a><div class="block">
<strong>With Javascript:</strong>
<XMP>
<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>
</XMP>
</div>
<a name="contentxml"><h4 >Assigning content to tabs in XML</h4
></a><div class="block">
<strong>With XML</strong>
<XMP>
<?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>
</XMP>
</div>
<!--- Loading contant in IFrames --->
<a name="ifrmode"><h4 >Loading content in IFrames</h4
></a><div class="block">
If tabbar hrefmode set to "iframe" or "iframes-on-demand", tabbar will load content in iframes (which will be created automatically)
<XMP>
<?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>
</XMP>
Possible hrefmode values are:
<ul>
<li>iframe - iframes created and its contnet loaded at once</li>
<li>iframes-on-demand - iframes created only when tab activated</li>
</ul>
</div>
<!--- Loading Content with AJAX --->
<a name="ajaxmode"><h4 >Loading Content with AJAX</h4></a><div class="block">
If tabbar hrefmode set to "ajax" or "ajax-html", tabbar will load content directly into the page (can contain javascript):
<XMP>
<?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>
</XMP>
Possible hrefmode values are:
<ul>
<li>ajax - contnet loaded from xml (see structure below)</li>
<li>ajax-html - contnet loaded from html file</li>
</ul>
<br><br>
In this case Tabbar expects AJAX request to get XML of the following structure:
<XMP>
<?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>
</XMP>
</div>
<!--- Settings --->
<a name="settings"><h4 >Settings: position, align, offset, marging</h4></a><div class="block">
<XMP>
<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>
</XMP>
</div>
<a name="skins"><h4 >Skining: colors,predefined skins</h4></a><div class="block">
<strong>Predefined Style Schemas:</strong><br>
There are 4 predefined schemas for Tabbar (see <a href="http://www.scbr.com/docs/products/dhtmlxTabbar/samples/tab_styles.html">sample</a>):
<ul>
<li>winDflt - Windows XP like (default style)</li>
<li>winScarf - same with one splay adge</li>
<li>winBiScarf - same with two splay adges</li>
<li>winRound - rounded tabs</li>
</ul>
<br>
To use necessary schema turn it on with <em>setStyle</em> method.
<br><br>
<strong>TabBar colors:</strong><br>
You can define background colors for tabs using <em>setSkinColors</em> method, where first argument sets background for active tab, second - for other tabs.
<XMP>
<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>
</XMP>
</div>
<a name="sizes"><h4>Manage tabbar and tab content area size</h4></a><div class="block">
<ul>
<li>Set tabs content area size depending on content size</li>
</ul>
<XMP>
//param 1 - adjust width automatically
//param 2 - adjust height automatically
tabbar.enableAutoSize(true,true);
</XMP>
<li>Set tabs content size depending on tabbar's container size (f.e. window size)</li>
<XMP>
tabbar.enableAutoReSize(true);
</XMP>
<li>Set fixed (minimal in case of AutoSize) size of tabbar</li>
<XMP>
//param 1 - width
//param 2 - height
//param 3 - true means that givven size is size of contnet area only
tabbar.setSize("200px","300px",true)
</XMP>
</div>
<a name="tabmanag"><h4>Manage each tab with script API</h4></a><div class="block">
<li>Get/Set(change) label of tab</li>
<XMP>
<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>
</XMP>
<li>Show/Hide existing tab</li>
<XMP>
<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>
</XMP>
<li>Add/Remove tab</li>
<xmp>
<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>
</xmp>
<li>Disable/Enable tab</li>
<xmp>
<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>
</XMP>
<li>Set/Get Active tab</li>
<xmp>
<script type="text/javascript">
tabbar.getActiveTab();
//param 1 - tab ID
tabbar.setTabActive(tabId);
</script>
</xmp>
</div>
</div>
</body>
</html>