Main features
- Multibrowser/Multiplatform support
- xHTML compatible
- Full controll with JavaScript - wide API
- Loading content with AJAX or in Iframes
- Top, bottom, right and left oriented tabs
- XML support
- Fully customizable
- Cool predefined skins
- Multi-line tabbars
- Scrollable
- Easy initialization
Supported browsers
- IE 5.x and above
- Mozilla 1.4 and above
- FireFox 0.9 and above
- Opera (Xml loading depends on browser version)
Working with dhtmlXTabBar
Initialize TabBar object from javascript constructor
With Javascript constructor:
Parameters passed to the constructor are:
- object to attach tabbar to (should be loaded before calling constructor)
Specify Additional parameters of the tabbar:
- setImagePath(url) - method specifies the path to the folder with tree icons
Then you can load tabs
from XML or add them
with script
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.
Content 1
Content 2
Content 3
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 contant in IFrames and Loading Content with AJAX
- offset - offset of first tab from edge.
- tabstyle - one of predefined styles: winDflt, winScarf, winBiScarf, winRound
- select - if tab selected
- 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
In this case the content of the tab should be placed inside tab DIV tags.
Building tabbar with Javascript
Parametrs:
- tab identifier
- title/label
- width
Building tabar from XML
XML Syntax:
Tab 1-1
Tab 1-2
Tab 2-1
Tab 2-2
Tab 2-3
In
PHP script use the following code for page header:
\n");
?>
<tabbar> node is mandatory. It specifies the parent of loading block of data.
Possible properties:
- hrefmode - optional. Possible values are: ajax/ajax-html or iframe/iframe-on-demand. Defines the way of loading tab page content.
- margin - space between tabs
- align - align of tabs group - left/right
- offset - offset of first tabs from edge
- tabstyle - one of predefined styles: winDflt, winScarf, winBiScarf, winRound
- skinColors
<row> can contain tabs (in order to load more than one level at once) or not.
Mandatory parameters for this tag are:
- width - width (height) of tab
- id - id of the node
Optional:
- selected - to set tab active. This attribute should be set to single tab in tabbar.
- href - url of the page to load under this tab (depending of tabbar/hrefmode it will use ajax or iframe)
Assigning content to tabs with Javscript
With Javascript:
Some content
Assigning content to tabs in XML
With XML
Tab 1-1
]]>
Tab 1-2
Some data |
]]>
Loading content in IFrames
If tabbar hrefmode set to "iframe" or "iframes-on-demand", tabbar will load content in iframes (which will be created automatically)
Google groups
Google search
Possible hrefmode values are:
- iframe - iframes created and its contnet loaded at once
- iframes-on-demand - iframes created only when tab activated
Loading Content with AJAX
If tabbar hrefmode set to "ajax" or "ajax-html", tabbar will load content directly into the page (can contain javascript):
SCBR 1
SCBR 2
SCBR 3
Possible hrefmode values are:
- ajax - contnet loaded from xml (see structure below)
- ajax-html - contnet loaded from html file
In this case Tabbar expects AJAX request to get XML of the following structure:
Settings: position, align, offset, marging
Skining: colors,predefined skins
Predefined Style Schemas:
There are 4 predefined schemas for Tabbar (see
sample):
- winDflt - Windows XP like (default style)
- winScarf - same with one splay adge
- winBiScarf - same with two splay adges
- winRound - rounded tabs
To use necessary schema turn it on with
setStyle method.
TabBar colors:
You can define background colors for tabs using
setSkinColors method, where first argument sets background for active tab, second - for other tabs.
Manage tabbar and tab content area size
- Set tabs content area size depending on content size
//param 1 - adjust width automatically
//param 2 - adjust height automatically
tabbar.enableAutoSize(true,true);
Set tabs content size depending on tabbar's container size (f.e. window size)
tabbar.enableAutoReSize(true);
Set fixed (minimal in case of AutoSize) size of tabbar
//param 1 - width
//param 2 - height
//param 3 - true means that givven size is size of contnet area only
tabbar.setSize("200px","300px",true)
Manage each tab with script API
Get/Set(change) label of tab
Show/Hide existing tab
Add/Remove tab
Disable/Enable tab
Set/Get Active tab