CODETHATXPBAR USER MANUAL

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
]