DHTML TABS :: Product Info

The following parameters (vars) should be placed within tabs-data.js file.

Common

var bblankImage = "file/image/icons/blank.gif";	Path to blank image (transparent gif, size: 1x1).
var bselectedItem = 0;	Selected tab index by default. Index is an tab number in bmenuItems array. Must be >= 0;

Menu

var bmenuOrientation = 0;	Reserved. Always sets to 0.
var bmenuWidth = 300;	Total width of all tabs (% or px). If "" or 0 - sets automatically. Recommended to set an exact value.
var bmenuHeight = 25;	Height of top tabs (% or px). If "" or 0 - sets automatically. Recommended to set an exact value.
var bmenuBorderWidth = 0;	Border width of tabs region.
var bmenuBorderStyle = "solid";	Border style of tabs region. Values: "none", "solid", "dotted", "dashed", "double", "ridge", "groove", "inset", "outset".
var bmenuBackImage = "file/image/icons/back.gif";	Background image of tabs region.

Tab Mode

var tabMode = 0;	Enable Tab Mode
var bselectedSmItem = 3;	Selected subtab index by default. Index is an tab number in bmenuItems array. Must be >= 0;
var bsmHeight = 16;	Height of subtabs tabs (% or px). If "" or 0 - sets automatically. Recommended to set an exact value.
var bsmBackColor = "#AA0000";	Background color of subtabs region. If "" - background is transparent.
var bsmBorderWidth = 0;	Border width of subtabs region.
var bsmBorderColor = "#AA0000";	Border color of subtabs region. The values such as "#FFFFFF #FFFFFF #000000 #000000" - will determine the color of each border side.
var bsmBorderStyle = "";	Border style of subtabs region. Values: "none", "solid", "dotted", "dashed", "double", "ridge", "groove", "inset", "outset".
var bsmBorderBottomDraw = 1;	0 - subtabs bottom border isn't displayed.
var bsmItemAlign = "center valign=top";	Subtabs text alignment.
var bsmItemSpacing = 0;	Space between subtabs.
var bsmItemPadding = 0;	Space between subtabs border and subtabs text.
var bitemTarget = "_blank";	Default target for all items ("_self","_blank","_parent","_top",...). If equal to "" - defined as "_self".

Menu Positioning

var babsolute = 1;	0 - relative tabs position; 1 - absolute tabs position.
var bleft = 120;	Tabs X coord. Used if babsolute = 1;
var btop = 120;	Tabs Y coord. Used if babsolute = 1;
var bfloatable = 0;	0 - tabs are fixed; 1 - tabs are floatable (used if babsolute = 1).
var bfloatIterations = 6;	Tabs floatable speed. Less value - more speed. Used if bfloatable = 1.

Font

var bfontStyle = ["bold 8pt Tahoma","",""];	Tabs font: normal state, mouse over state, selected tab state. Also sets style and height of font. Recommended to use equal values for all states. If 2nd and 3rd values are empty - 1st value will be used for all states.
var bfontColor = ["#ffffff","#ffffff","#000000"];	Tabs font color: normal state, mouse over state, selected tab state.
var bfontDecoration = ["none","underline","none"];	Tabs font decoration: normal state, mouse over state, selected tab state. Values: none, underline.

Items

var bbeforeItemSpace = 10;	Space before tab text.
var bafterItemSpace = 10;	Space after tab text.
var bitemBorderWidth = 0;	Tab border width.
var bitemBorderStyle = ["solid","dotted","solid"];	Tab border style: normal state, mouse over state, selected tab state.
var bitemAlign = "center";	Tab text alignment.
var bitemCursor = "pointer";	Tab cursor. Values: "auto", "crosshair", "default", "hand", "move", "text", "wait", "help".
var bitemSpacing = 0;	Space between tabs.
var bitemPadding = 4;	Space between tab border and tab text.
var browSpace = 0;	Space between tab rows.

Item Images

var bitemBackImage = ["file/image/icons/img1.gif", "file/image/icons/img2.gif","file/image/icons/img3.gif",];	Tab background image: normal state, mouse over state, selected tab state.
var bbeforeItemImage = ["file/image/icons/image1.gif", "file/image/icons/image2.gif","file/image/icons/image3.gif"]	Tabs left-side image: normal state, mouse over state, selected tab state.
var bbeforeItemImageW = 12;	Width of left-side image. Recommended to set an exact value.
var bbeforeItemImageH = 22;	Height of left-side image. Recommended to set an exact value.
var bafterItemImage = ["file/image/icons/image1.gif", "file/image/icons/image2.gif","file/image/icons/image3.gif"]	Tabs right-side image: normal state, mouse over state, selected tab state.
var bafterItemImageW = 12;	Width of right-side image. Recommended to set an exact value.
var bafterItemImageH = 22;	Height of right-side image. Recommended to set an exact value.

Color

var bmenuBackColor = "#FFFFFF";	Background color of tabs region. If "" - background is transparent.
var bitemBackColor = ["#24B327","#83D83D","#B79A15"];	Tab background color: normal state, mouse over state, selected tab state.
var bmenuBorderColor = "#000000";	Border color of tabs region. The values such as "#FFFFFF #FFFFFF #000000 #000000" - will determine the color of each border side.
var bitemBorderColor = ["#ffffff","#000000", "#ffffff"];	Tab border color: normal state, mouse over state, selected tab state.

Icons

var biconAlign = "left";	Tab icon alignment: "left" or "right".
var biconWidth = 16;	Tab icon width. Recommended to set an exact value.
var biconHeight = 16;	Tab icon height. Recommended to set an exact value.

Separators

var bseparatorWidth = 7;	Separator item width. This item used as a space between groups of tabs. Separator is item with "-" text.

Visual Effects

var btransition = 24;	Transition effect: 0..39. See transition effects info.
var btransDuration = 300;	Duration of transition effect in ms.
var btransOptions = "...";	Additional options for transition effects with numbers 25..39. See transition effects info.

Menu items are placed within tabs-data.js file.
This file contains:
1. Menu parameters
2. Menu items, individual item styles
3. Function for a dhtml menu initialization (dtabs_init();)

Tabs Menu Items

Tabs Menu items is an array of arrays. This array has the following structure:

var bmenuItems = [
        [item_text, object_to_show, normal_icon, mouseover_icon, selected_icon, tooltip, item_style],
        [item_text, object_to_show, normal_icon, mouseover_icon, selected_icon, tooltip, item_style],
        ...
];

text

The text of an item.
Add "|" symbols before the item text to set a level of the menu item (Tab Mode only).
For example:
        Home - top-menu item with text "Home" (item level is 0).
        |Home1 - 1st level item with text "Home1".
        |Home2 - 1st level item with text "Home2".

Add '-' symbol in the item text to set a separator:
        - - item is separator

To create a new row you should add "$" symbol before the item text:

         ["$item Text", ...]

You can add any html code, for example:
var menuItems = [ ....
["<nobr><input value='search the web' size=15 style='font-size:10'> </nobr> Text Text Text","","images/icons/search.gif", "", "", "", "", "2", "", "", "",],

Object ID property

ID attribute of object to show or Java Script code. Link to open in Tab Mode.
For example:

var tabMode = 1;
        ["tab text","dir/mypage.html", ...],

var tabMode = 0;
        ["tab text","div1", ...],
        ["tab text","div2", ...],       Where "div1" and "div2" are IDs of objects within your html page, for example:
                                             <div id="div1">text 1</div>
                                             <div id="div2">text 2</div>

        ["tab text","javascript: window.open('test.html', 'frameName')", ...],

Where frameName - the name of the frame where you want to open the page test.html.

normal_icon, mouseover_icon, selected_icon

Icons of an item in normal, mouseover and selected states.

tooltip

The hint that will be shown after you hover over an item.

item_style

Index of an individual item style, >= 0.
Use this parameter to assign individual styles for each item.
See more info about individual item styles.

You can move all data from tabs-data.js file to your html page within <script></script> tags. It can be helpful when you load items from a database using a server-side script (PHP, ASP, VB, etc.). Notice
If you use a server-side script within tabs-data.js file the script won't work.

Individual Item Styles

Individual item styles are special dhtml menu parameters (arrays) that you can assign to each item of the javascript menu.
Using these styles you can create any menu you like.

var bitemStyles = [
        ["paramName=value", "paramName=value", "paramName=value", ...],     // style with index 0
        ["paramName=value", "paramName=value", "paramName=value", ...],     // style with index 1
        ...
];

Each item style can use the following item parameters:

paramName=value	Description
bfontStyle = style1,style2,style3	Normal, mouse over and selected font styles.
bfontColor = color1,color2,color3	Normal, mouse over and selected font colors.
bfontDecoration = decor1,decor2,decor3	Normal, mouse over and selected font decorations. Available values: "none", "solid", "double", "dotted", "dashed", "groove", "ridge".
bitemBackColor = color1,color2,color3	Normal, mouse over and selected item background colors.
bitemBorderColor = color1,color2,color3	Normal, mouse over and selected item border colors.
bitemBorderWidth = width1,width2,width3	Normal, mouse over and selected item border width.
bitemBorderStyle = style1,style2,style3	Normal, mouse over and selected item border styles. Available values: "none", "solid", "double", "dotted", "dashed", "groove", "ridge".
bitemBackImage = img1,img2,img3	Normal, mouse over and selected item background images.
bitemWidth = number	Width of an item.
biconW = number	Icons width.
biconH = number	Height of an icons.
bbeforeItemImage = img1,img2,img3	Normal, mouse over and selected item left images.
bafterItemImage = img1,img2,img3	Normal, mouse over and selected item right images.

There is also one more individual parameter:

bitemBackImageSpec = "normal-normal,normal-over,normal-selected,over-normal,over-selected,selected-normal,selected-over".

Where: normal-normal, normal-over, ... - are images for different double-states.
Use this parameter when you want tabs to look more impressive.

Following items use this parameter to make a bring-to-front effect:

To achieve this effect use the following structure for tabs:

Item1 separator Item2 separator Item3 separator Item4

Each separator has 7 states:

and uses the following syntax:

["-",,,,,"0"],

Where "0" - is a number of individual style that includes bitemBackImageSpec property with names of 7 images.

After you created item styles you can assign them to menu items.
For example:

var bstyles = [
        ["bitemWidth=22","bitemBackImageSpec=images/style01_nn_center.gif,images/style01_no_center.gif,
        images/style01_ns_center.gif,images/style01_on_center.gif,images/style01_os_center.gif,
        images/style01_sn_center.gif,images/style01_so_center.gif"],     // style 0
        ["bbeforeItemImage=images/style01_n_left.gif,images/style01_o_left.gif,images/style01_s_left.gif"],     // style 1
        ["bafterItemImage=images/style01_n_right.gif,images/style01_o_right.gif,images/style01_s_right.gif"],     // style 2
];

var bmenuItems = [
        ["Style Name", "div1", "myicon1.gif", "myicon2.gif", "myicon3.gif", "Home Page Tip", "1"],       // assign style 1
        ["-", "", "", "", "", "", "0"],      // assign style 0
        ["Style Description", "div2", "", "", "", "Write Us Tip", ""],
        ["-", "", "", "", "", "", "0"],      // assign style 0
        ["Empty", "div2", "myicon1.gif", "myicon2.gif", "myicon3.gif", "Home Page Tip", "2"],      // assign style 2
];

All menu parameters are placed within tabs-data.js file. This file contains:
1. Menu parameters
2. Menu items, individual styles
3. Function for a tabs menu initialization (dtabs_init();)

How to Setup

Installation of DHTML Tabs

Place all engine files into any folder of your html project and add a reference to these files within your HTML page. For example, it will be menudir/ folder.

Relative position

1. Paste the following code into a <head> tag of your page:


<noscript><a href="http://deluxe-tabs.com">Javascript Tabs Menu by Deluxe-Tabs.com</a></noscript>
<script type="text/javascript" src="menudir/dtabs.js"></script>


2. Paste the following code in the place where you want to have the menu:

<script type="text/javascript" src="menudir/tabs-data.js"></script>
For example into a table cell:

<table>
<tr>
<td><script type="text/javascript" language="JavaScript1.2" src="yourdir/data.js"></script></td>
</tr>
</table>

See HTML sample

Absolute position

Paste the following code into a <head> tag of your page:


<noscript><a href="http://deluxe-tabs.com">Javascript Tabs Menu by Deluxe-Tabs.com</a></noscript>
<script type="text/javascript" src="menudir/dtabs.js"></script>
<script type="text/javascript" src="menudir/tabs-data.js"></script> 

and set absolute coordinates of top-left menu corner in the data file, example:

var babsolute=1;
var bleft=100;
var btop=150;

Description of Menu Files

DHTML Tabs package consists of the following files:

tabs-data.js	data file with menu parameters, items, styles This file can be renamed. You can generate this file in DHTML Tuner.
dtabs.js	menu engine file

tabs-data.js

Adjustable menu parameters are situated in a separate .js-file (tabs-data.js by default).
You can rename this file as you want.

This file includes:

    1. Menu parameters.
    2. Items, styles.
    3. Initialization function for a menu (dtabs_init()).

See sample code.

You can place all content from tabs-data.js file into html page directly within <script></script> tags.
It can be helpful when you load menu parameters and items from database (e.g. mySQL) using a server side script (ASP, PHP, VB, etc.).

List of Supported Browsers

Windows OS

		Internet Explorer 5+
		FireFox
		Mozilla
		Netscape 4.7+
		Opera 5+

MAC OS

		FireFox
		Safari
		Internet Explorer

Linux/Unix OS

		Konqueror
		Mozilla