Dear surfer, Welcome to the ":: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::" page of the CodeThat.Com,The content of the page can be defined as: CodeThatXPBar is a navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP.Most likely you found us using the keywords: "CodeThatXPBar, script, bar, XP bar, javascript, javascript XP bar, free, free javascript XP bar, cross-browser, html, xml, css, control panel, Windows XP, explorer".This page (and site) presumes you have JavaScript enabled and best viewed when it is enabled. Please refer to your browser's documentation to find out how you can enable the JavaScript.You may want to do it as well because we at CodeThat.Com provide these JavaScript solutions and we are useless for you unless you enable the JavaScript. Looking forward to serve you,CodeThat.Com

PRODUCTS

SUPPORT

CODETHAT

Affiliate registration

Our Customers

STUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER

User Manual

Introduction Style customize Bar position Items' actions

HTML code as items' text XPBar from the database

Change XPBar Behaviour Standard vs PRO

On-line Builder

PRO

STD

123Guide Examples Download

Order PRO Now Themes FAQ

CODETHATXPBAR USER MANUAL

Style Customize

CodeThatXPBar allows you to customize style for whole submenus and individual items. Different styles can be assigned to ordinary items and for items that are under mouse cursor.

Style specified in the topmost bar describes the default style for the whole bar and all bar's items.

When the style attribute is specified in the item's description or submenu description, it overrides the style of the parent.

To specify style for a bar and bar's items, use the "style" property, as is shown at folowing construction:

"style"	 : {
	"css" : "",
	"size" : [width, height],
	"align" : "",
	"color" : "",
	"bgimg" : "",
	"bgcolor" : "",
	"shadow" : {
		"color", "width"
	}
	"border" : {
		"color", "width"
	}
	"imgitem" : "",
	"imgdir" : "",
	"imgdiropen" : "",
	"imgendon" : "",
	"imgendoff" : "",
	"z" : "",
	"opacity" :
}

where

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

The Main Style Properties - Borders and Shadows, Itemover, Css, Scrollers and Backgrounds

CodeThatXPBar allows you to specify borders and shadows for your bars. For this purpose you should specify border/shadow like it shown at the example:

"style" :
{
	"border" : {
		"color" : "#003882", "width" : 1
	},
	"shadow" : {
		"color" : "gray", "width" : 2
	}
}

To customize style for items under mouse cursor you may use code like following:

"itemover" : {
	"css" : "test1", "bgcolor" : "#458EEE", "align" : "middle",
	"color" : "white"
}

You can use CSS to set certain properties for your bar:

"style"	 : {
	"css" : "test1"
}

where "test1" is a name of css-style that can be described in a separate css-file or in the html file.

.test1
{
	FONT - SIZE : 8pt;
	FONT - FAMILY : Verdana, Arial;
	TEXT - ALIGN : justify;
	FONT - WEIGHT : bolder;
	MARGIN - LEFT : 5px;
	MARGIN - RIGHT : 5px
}

You may want to cancel border/shadow that was defined for bar at whole, for a certain menu item or submenu.

"style" : {
	"border" : "",
	"shadow" : ""
}

You have a posibility to determine scrollers for your XPBar. For example:

"style" : {
	...
},
"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

You can use various colors for items' background and even specify background image.

"style" : {
	"bgcolor" : "#669002"
}
"style" : {
	"bgimg" : "img/grass.gif"
}

Example - The main style properties

You can see an example and complete code here - The main style properties Example

Bullet Images

With CodeThatXPBar you can specify various bullet images for the items:

bullet image for non-submenu (bar) or plain (tree) items or default bullet for a menu item

bullet image for submenu items

bullet image for open submenu with items

end item bullet when in "on" or "opened" state

"style" : {
	"imgitem" : {
		"src" : "img/bul.gif", "width" : 16, "height" : 16
	},
	"imgdir" : {
		"src" : "img/dir.gif", "width" : 16, "height" : 16
	},
	"imgendon" : {
		"src" : "img/arr_down.gif", "width" : 16, "height" : 16
	},
	"imgendoff" : {
		"src" : "img/arr_right.gif", "width" : 16, "height" : 16
	}
}

Example - Bullet Images

You can see an example and complete code here - Bullet Images Example

Opacity

You can define an items opacity (IE 5+):

"style" :
{
	"opacity" : 50
}

Example - Opacity

You can see an example and complete code here - Opacity Example