Introduction
With CodeThatXPBar you can
customize style for your bar:
 define items opacity
background colors, background images, shadows, borders are supported
images in bar items are supported (both for plain items and submenus)
 alignment support
 XPBar appearance (and individual items) can be controlled through the CSS class
define items opacity
describes the scrollers set
 change bar behaviour
define bar position:
 different positioning for submenus (relatively to higher menu) is supported
support for absolute and relative positioning
define the action to be excuted when the item is cliked
include almost any HTML code as bar's item
generate bar script from the database
Read Standard vs PRO to know the differences between CodeThatXPBar Standard and PRO.
The configuration of the CodeThatXPBar can be stored in the separate js file.
To describe new CodeThatXPBar create an object with following structure:
var BarDef = {
"style" : { }
"scroller" : { }
"itemover" : { },
"position" : { },
"items" : [ ]
};
|
where
items - submenu items
style - box - item/box style
itemover - box - item style when in "mouseover" state
position - box position (either relative or absolute)
|
To describe an item use following structure:
"items" : [
"style"
{
css : string : CSS class
size : [width, height] : item width/height
align : string : text alignment
(left/right/center/middle)
color : string : color string for the text
bgimg : string : url of the background image
bgcolor : string : color string
shadow : { "color" : string, "width" : int } : shadow parameters
border : { "color" : string, "width" : int } : border parameters
imgitem : { "src" : string, "width" : int, "height" : int } :
bullet image for
non-submenu (bar) or
plain (tree) items or
default bullet for
a menu item
imgdir : {
"src" : string,
"width" : int, "height" : int
}
: bullet image for submenu items
imgdiropen : {
"src" : string,
"width" : int, "height" : int
}
: bullet image for open submenu with items
imgendon : {
"src" : string,
"width" : int, "height" : int
}
: end item bullet when in "on" or "opened" state
imgendoff : {
"src" : string,
"width" : int, "height" : int
}
: end item bullet when in "off" or "closed" state
z : int : z - index
opacity : int : opacity
},
"scroller" : {
"style" : {
...
},
"styleover" : {
...
},
"up" : url, "down" : url,
"height" : int, //scroller's height
"step" : int, //step to scroll by
"time" : int, //pause in milliseconds
"len" : int, //length in pixels to scroll
"offset" : int //if scroller size smaller
//that bar size set margin from the left side
} // describes the scrollers set
]
|
Read more about CodeThatXPBar >>
|