dhtmlxTabbar - AJAX powered DHTML JavaScript Tabbar component with rich API
dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tab-navigation interface. This control lets you add nice looking and powerful multiline* tab bar to your site or web application.
The control can be easily initialized on a web page that makes building
of DHTML tabbed interface a breeze. Just assign any elements on your page (for example DIVs)
to tabs of Tabbar, and it will automatically do all work for you
- the component will switch these elements displaying them by clicking on corresponding tab
(see sample code for easy and fast initialization at the bottom of this page).
Using dhtmlxTabbar, you can place your tabs in four (4!) different ways.
It is easy to do with script. Just use second parameter of constructor:
Tabs can be left, right, top or button aligned. You can define tabs appearance according to different visual styles (predefined or your own).
Cross-browser compatible, XML driven and fully configurable dhtmlxTabbar with rich javascript API provides a simple but powerful solution for building client-side navigation.
Together with other dhtmlx components:
dhtmlxTree, dhtmlxGrid/TreeGrid, dhtmlxMenu and dhtmlxToolbar - it constitutes ready to use basis for any AJAX driven web based application.
dhtmlxTabbar v.1.2 is available since July 12, 2007.
(last build from August 13, 2007)
Professional - contains additional features (with examples) which are not present at standard edition. Included with Commercial and Enterprise licenses. Contact us to buy.
Commercial License (standard and professional editions): in order to use any edition of dhtmlxTabbar in a non-GPL project, get all features available in professional edition or to have support you can purchase a Commercial License ($69). Contact us to buy.
<link rel="STYLESHEET" type="text/css" href="dhtmlXTabbar.css">
<script src="dhtmlXCommon.js"></script>
<script src="dhtmlXTabbar.js"></script>
<!-- following div is tabbar container -->
<div id="a_tabbar" style="width:390; height:190;"></div>
<!-- following DIVs will be attached to tabs with script -->
<div id="for_tab1">...some html for First Tab area here...</div>
<div id="for_tab2">...some html for Second Tab area here...</div>
<script>
//create tabbar object
yourTabbar = new dhtmlXTabBar("a_tabbar","left");
tabbar.setImagePath("imgs/");
//load tabbar from xml
tabbar.loadXML("tabs.xml");
//assign on-page elements to tabs in tabbar
tabbar.setContent("tab1","for_tab1");
tabbar.setContent("tab2","for_tab2");
</script>
Or you can do the same without script and xml:
<link rel="STYLESHEET" type="text/css" href="dhtmlXTabbar.css">
<script src="dhtmlXCommon.js"></script>
<script src="dhtmlXTabbar.js"></script>
<!-- !!! Following is important inclusion -->
<script src="dhtmlXTabbar_start.js"></script>
<!-- Define your tabbar and tabs using DIV and class="dhtmlxTabBar" -->
<div id="a_tabbar"
class="dhtmlxTabBar"
imgpath="imgs/"
style="width:390; height:190;"
skinColors="#FCFBFC,#F4F3EE">
<div id="for_tab1" width="100" name="Advanced" style="display:none;">
...some html for First Tab area here...</div>
<div id="for_tab2" width="100" name="Hardware" style="display:none;">
...some html for Second Tab area here...</div>
</div>
