|
var bblankImage = "img/blank.gif";
|
Path to blank image (transparent gif, size: 1x1).
|
|
var bmenuWidth = 300;
|
Total width of all tabs (% or px). If "" or 0 - sets automatically.
Recommended to set an exact value.
|
|
var bmenuHeight = 25;
|
Total height of all tab rows (% or px). If "" or 0 - sets automatically.
Recommended to set an exact value.
|
|
var bmenuOrientation = 0;
|
Reserved. Always sets to 0.
|
 |
|
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.
|
|
|
var bmenuBackColor = "#FFFFFF";
|
Background color of tabs region. If "" - background is transparent.
|
|
var bmenuBorderWidth = 0;
|
Border width of tabs region.
|
|
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 bmenuBorderStyle = "solid";
|
Border style of tabs region. Values: "none", "solid", "dotted", "dashed", "double", "ridge", "groove", "inset", "outset".
|
|
var bmenuBackImage = "img/back.gif";
|
Background image of tabs region.
|
|
|
var bbeforeItemSpace = 10;
|
Space before item text.
|
|
var bafterItemSpace = 10;
|
Space after item text.
|
|
var bbeforeItemImage = ["img/image1.gif","img/image2.gif","img/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 = ["img/image1.gif","img/image2.gif","img/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.
|
|
|
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.
|
|
|
var bitemBorderWidth = 0;
|
Item border width.
|
|
var bitemBorderColor = ["#ffffff","#000000", "#ffffff"];
|
Item border color: normal state, mouse over state, selected tab state.
|
|
var bitemBorderStyle = ["solid","dotted","solid"];
|
Item border style: normal state, mouse over state, selected tab state.
|
|
var bitemBackColor = ["#24B327","#83D83D","#B79A15"];
|
Item background color: normal state, mouse over state, selected tab state.
|
|
var bitemBackImage = ["img/img1.gif","img/img2.gif","img/img3.gif",];
|
Item background image: normal state, mouse over state, selected tab state.
|
|
|
var bitemAlign = "center";
|
Item text alignment.
|
|
var bitemCursor = "pointer";
|
Item cursor. Values: "auto", "crosshair", "default", "hand", "move", "text", "wait", "help".
|
|
var bitemSpacing = 0;
|
Space between items.
|
|
var bitemPadding = 4;
|
Space between item border and item text.
|
|
var browSpace = 0;
|
Space between tab rows.
|
|
|
var biconAlign = "left";
|
Item icon alignment: "left" or "right".
|
|
var biconWidth = 16;
|
Item icon width. Recommended to set an exact value.
|
|
var biconHeight = 16;
|
Item icon height. Recommended to set an exact value.
|
|
|
var bseparatorWidth = 7;
|
Separator item width. This item used as a space between groups of tabs.
Separator is item with "-" text.
|
|
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.
|
|
var bmenuItems = [[..]];
Format:
[item_text, object_to_show, normal_icon, mouseover_icon, selected_icon, tooltip, item_style]
Example:
var bmenuItems = [
["Home","testlink.html","icon.gif","iconover.gif","iconselected.gif","Home Tip","0"],
];
- item_label:
Separator is "-";
New tabs row starts with "$" symbol (e.g. "$item text");
Full image-based item contained icon only must has item_label = "".
- object_to_show
ID attribute of object to show or JavaScript code (e.g. "javascript:alert('test')")
- item_style
You can use individual styles for tabs.
item_style is the index of required style within style array, defined in bitemStyles variable, example:
var bitemStyles = [
["bfontStyle=normal 9pt Tahoma","bitemBackColor=#AA0000,#AAAA00,#000000"],
];
Available parameters for individual item style are:
bfontStyle = style1,style2,style3
bfontColor = color1,color2,color3
bfontDecoration = decor1,decor2,decor3
bitemBackColor = color1,color2,color3
bitemBorderColor = color1,color2,color3
bitemBorderWidth = width1,width2,width3
bitemBorderStyle = style1,style2,style3
bitemBackImage = img1,img2,img3
bitemWidth = number
biconW = number
biconH = number
bbeforeItemImage = img1,img2,img3
bafterItemImage = img1,img2,img3
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.
This individual parameter is used when you want tabs to look more impressive.
For example, following items use this parameter to make a brind-to-front effect:
To achieve this effect tabs use the following structure:
Item1 separator Item2 separator Item3 separator Item4
Each separator has 7 states:
and uses the following syntax:
["-",,,,,"0"],
Where "0" - is an individual style number that includes bitemBackImageSpec property with names of 7 images.
|
|
|
How to Setup
Apycom DHTML Tabs comes with two files that can be found in the "js/" subdirectory in this download:
apytabs.js - tabs engine and
data.js - data file with tabs parameters (this file may be renamed, but must include the '.js' extension).
Place these files to any folder of your html project and add a reference to the files within your HTML page.
You can use both absolute and relative coordinates to position the tabs.
-
Relative position
Paste the following code into the <head> tag.
<!-- Apycom DHTML Tabs -->
<noscript><a href=http://dhtml-menu.com/>DHTML Tabs, (c)2004 Apycom</a></noscript>
<script type="text/javascript" language="JavaScript1.2" src="yourdir/apytabs.js"></script>
<!-- Apycom DHTML Tabs, dhtml-menu.com -->
and paste the following code within your html page in a position you want the tabs to appear:
<script type="text/javascript" language="JavaScript1.2" src="yourdir/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>
-
Absolute position
Paste the following code into the <head> tag.
<!-- Apycom DHTML Tabs -->
<noscript><a href=http://dhtml-menu.com/>DHTML Tabs, (c)2004 Apycom</a></noscript>
<script type="text/javascript" language="JavaScript1.2" src="yourdir/apytabs.js"></script>
<script type="text/javascript" language="JavaScript1.2" src="yourdir/data.js"></script>
<!-- Apycom DHTML Tabs, dhtml-menu.com -->
and set coordinates of top-left menu corner in the data file, example:
var babsolute=1;
var bleft=100;
var btop=150;
|
|
|
Purchase
This trial version of
Apycom DHTML Tabs may be used for evaluation purposes only for a
period of 30 days.
Evaluation use includes the review and or customization of the software on one
local computer. This software may not be placed on the internet or a local
intranet site for viewing and or use by multiple persons.
The purchased version includes a license to place the software on publicly accessible web pages and
does not display the trial version reminder.
Also you can purchase the Java source code of the software.
For more information see order page and
License Agreement.
|
