CodeThatXPBar - XPBar and XPBar's items Positioning Example
var BarDef = { "style" : { "css" : "bartitle", "align" : "center", "bgcolor" : "#E6A008", "size" : [110, 25], "shadow" : { "color" : "#265BCC", "width" : 3 }, "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" : [110, 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" : "right", "bgimg" : "img/title_bg.gif", "size" : [100, 25] }, "menu" : { "style" : { "size" : [100, 25], "bgcolor" : "#D6DFF7", "border" : { "color" : "#ffffff", "width" : 1 }, "bgimg" : "", "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", "itemoffset" : { "x" : 8, "y" : 20 }, "size" : [90, 25] }, "menu" : { "style" : { "size" : [90, 25], "bgcolor" : "#D6DFF7", "border" : { "color" : "#ffffff", "width" : 1 }, "bgimg" : "", "align" : "center" }, "itemover" : { "imgendon" : { }, "imgendoff" : { }, "bgimg" : "" }, "items" : [ { "text" : "Item 1" }, { "text" : "Item 2" }, { "text" : "Item 3" } ] } } ] };