CodeThat.com

CodeThatXPBar - The main style properties Example

var BarDef =
{
	"style"	 : {
		"css"	 : "bartitle",
		"align" : "center",
		"bgcolor" : "#6C86DC",
		"size"	 : [110, 25],
		"shadow" : {
			"color" : "#C0C0C0", "width" : 1
		},
		"border" : {
			"color" : "#000000", "width" : 1
		},
		"imgspace" : 5,
		"imgendon" : {
			"src" : "img/arr_down.gif",
			"width" : 24,
			"height" : 24
		},
		"imgendoff" : {
			"src" : "img/arr_up.gif",
			"width" : 24,
			"height" : 24
		},
		"itemoffset" : {
			"x" : 5, "y" : 10
		},
		"fixheight" : 250,
		"scroller" : {
			"height" : 25, "bgimg" : "",
			"color" : "#ffffff",
			"up" : "img/scroller_up.gif",
			"down" : "img/scroller_down.gif",
			"step" : 5, "time" : 30, "len" : 60
		}
	},
	"itemover" : {
		"css" : "bartitleover",
		"imgendon" : {
			"src" : "img/arr_down_over.gif",
			"width" : 24, "height" : 24
		},
		"imgendoff" : {
			"src" : "img/arr_up_over.gif",
			"width" : 24, "height" : 24
		},
		"bgimg" : "img/title_bg.gif"
	},
	"itemon" : {
		"bgcolor" : "#265BCC", "color" : "#ffffff"
	},
	"position" : {
		"absolute" : true, "pos" : [10, 10]
	},
	"items" : [
	{
		"text" : "Item 1",
		"style" : {
			"align" : "center",
			"bgimg" : "img/title_bg.gif"
		},
		"menu" : {
			"style" : {
				"size" : [100, 25],
				"bgcolor" : "#D6DFF7",
				"border" : {
					"color" : "#ffffff", "width" : 1
				},
				"bgimg" : "",
				"align" : "center",
				"itemoffset" : {
					"x" : 5, "y" : 1
				}
			},
			"itemover" : {
				"imgendon" : { },
				"imgendoff" : { },
				"bgimg" : ""
			},
			"items"	 : [
			{
				"text" : "Item 1"
			},
			{
				"text" : "Item 2"
			} ]
		}
	},
	{
		"text" : "Item 2",
		"style" : {
			"align" : "center",
			"bgimg" : "img/title_bg.gif"
		},
		"menu" : {
			"style" : {
				"size" : [100, 25],
				"bgcolor" : "#D6DFF7",
				"border" : {
					"color" : "#ffffff", "width" : 1
				},
				"bgimg" : "",
				"align" : "center",
				"itemoffset" : {
					"x" : 5, "y" : 1
				}
			},
			"itemover" : {
				"imgendon" : { },
				"imgendoff" : { },
				"bgimg" : ""
			},
			"items"	 : [
			{
				"text" : "Item 1"
			},
			{
				"text" : "Item 2"
			} ]
		}
	},
	{
		"text" : "Item 3",
		"style" : {
			"align" : "center",
			"bgimg" : "img/title_bg.gif"
		},
		"menu" : {
			"style" : {
				"size" : [100, 25],
				"bgcolor" : "#D6DFF7",
				"border" : {
					"color" : "#ffffff", "width" : 1
				},
				"bgimg" : "",
				"align" : "center",
				"itemoffset" : {
					"x" : 5, "y" : 1
				}
			},
			"itemover" : {
				"imgendon" : { },
				"imgendoff" : { },
				"bgimg" : ""
			},
			"items"	 : [
			{
				"text" : "Item 1"
			},
			{
				"text" : "Item 2"
			},
			{
				"text" : "Item 3"
			} ]
		}
	},
	{
		"text" : "Item 4",
		"style" : {
			"align" : "center",
			"bgimg" : "img/title_bg.gif"
		},
		"menu" : {
			"style" : {
				"size" : [100, 25],
				"bgcolor" : "#D6DFF7",
				"border" : {
					"color" : "#ffffff", "width" : 1
				},
				"bgimg" : "",
				"align" : "center",
				"itemoffset" : {
					"x" : 5, "y" : 1
				}
			},
			"itemover" : {
				"imgendon" : { },
				"imgendoff" : { },
				"bgimg" : ""
			},
			"items"	 : [
			{
				"text" : "Item 1"
			},
			{
				"text" : "Item 2"
			},
			{
				"text" : "Item 3"
			} ]
		}
	} ]
};