Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jose on Sep 04, 2009 10:01
open dhtmlx forum
How to use a different skin on tabbar?

Hi,

I try this but does not work at all.

<div id="TABtest" style="width:500px;height:400px;background-color: aqua"></div>
<script type="text/javascript" language="javascript" >
 tabbar_TABS1 = new dhtmlXTabBar("TABtest", "top");
 tabbar_TABS1.setImagePath("codebase/imgs/");
 
/* elcomercioStyleSchema=["elcomercio/p_left.gif","elcomercio/p_middle.gif","elcomercio/p_right.gif",
 "elcomercio/a_left.gif","elcomercio/a_middle.gif","elcomercio/a_right.gif","elcomercio/p_middle_over.gif",5,6,6,false,false,false];
 
tabbar_TABS1.setStyle("elcomercio");
*/
 

 tabbar_TABS1.setSkin("elcomercio");
 tabbar_TABS1._styles.elcomercio=["elcomercio/p_left.gif","elcomercio/p_middle.gif","elcomercio/p_right.gif",
 "elcomercio/a_left.png","elcomercio/a_middle.png","elcomercio/a_right.png","elcomercio/p_middle_over.gif",5,6,6,false,false,false];
 
 tabbar_TABS1.setHrefMode("iframes");
 tabbar_TABS1.addTab("tab_20264","test 1","100px");
 tabbar_TABS1.addTab("tab_20265","Test 2","100px");

tabbar_TABS1.setContentHref("tab_20264","http://www.microsoft.com");
tabbar_TABS1.setContentHref("tab_20265","http://www.gsihome.com");

</script>

Please, anyone can help me?

Answer posted by Alex (support) on Sep 06, 2009 23:53

Hello, 

the provided code looks correct. Please, check that p_left.gif, p_middle.gif and other images are the codebase/imgs/top/elcomercio folder.

Answer posted by Jose Sanchez on Sep 08, 2009 06:37

Hello,

Yes, all images are on the codebase/imgs/top/elcomercio folder.

I guest the problem is on tabbar_TABS1._styles.elcomercio=["elcomercio/p_left.gif","elcomercio/p_middle.gif","elcomercio/p_right.gif", "elcomercio/a_left.png","elcomercio/a_middle.png","elcomercio/a_right.png","elcomercio/p_middle_over.gif",5,6,6,false,false,false];
. When I run this page, the variable _styles on tabbar object not have value to elcomercio. I did the following test. I put this  value this._styles={winDflt:["p_left.gif","p_middle.gif","p_right.gif","a_left.gif","a_middle.gif","a_right.gif","a_middle.gif",3,3,6,"#F4F3EE","#F0F8FF",false],
 winScarf:["with_bg/p_left.gif","with_bg/p_middle.gif","with_bg/p_right_skos.gif","with_bg/a_left.gif","with_bg/a_middle.gif","with_bg/a_right_skos.gif","with_bg/p_middle_over.gif",3,18,6,false,false,false],
 winBiScarf:["with_bg/p_left_skos.gif","with_bg/p_middle.gif","with_bg/p_right_skos.gif","with_bg/a_left_skos.gif","with_bg/a_middle.gif","with_bg/a_right_skos.gif","with_bg/p_middle_over.gif",18,18,6,false,false,false],
 winRound:["circuses/p_left.gif","circuses/p_middle.gif","circuses/p_right.gif","circuses/a_left.gif","circuses/a_middle.gif","circuses/a_right.gif","circuses/p_middle_over.gif",10,10,6,false,false,false],
 silver:["silver/p_left.gif","silver/p_middle.gif","silver/p_right.gif","silver/a_left.gif","silver/a_middle.gif","silver/a_right.gif","silver/p_middle.gif",7,8,6,"#F4F3EE","#F0F8FF","white"],
 modern:["modern/p_left.gif","modern/p_middle.gif","modern/p_right.gif","modern/a_left.gif","modern/a_middle.gif","modern/a_right.gif","modern/p_middle_over.gif",5,5,6,false,false,"white"],
glassy_blue:["dhxgrid_glassy_blue/p_left.png","dhxgrid_glassy_blue/p_middle.png","dhxgrid_glassy_blue/p_right.png","dhxgrid_glassy_blue/a_left.png","dhxgrid_glassy_blue/a_middle.png","dhxgrid_glassy_blue/a_right.png","dhxgrid_glassy_blue/p_middle.png",2,3,8,false,false,"white",null,3,3,-4],
dhx_blue:["blue/r_p.png","blue/c_p.png","blue/l_p.png","blue/r_a.png","blue/c_a.png","blue/l_a.png","blue/c_p.png",2,2,4,false,false,"transparent",0,2,0,0,";border:1px solid #C2D5DC;border-top:1px solid #C2D5DC;background-color:#D2E3EA","#D2E3EA","top/blue/close.gif","top/blue/scrl_r.gif","top/blue/scrl_l.gif"],
dhx_black:["dark/r_p.png","dark/c_p.png","dark/l_p.png","dark/r_a.png","dark/c_a.png","dark/l_a.png","dark/c_p.png",2,2,4,false,false,"transparent",0,2,0,0,";border:1px solid #333333;border-top:1px solid #626262;background-color:#000000","#333333","top/dark/close.gif","top/dark/scrl_r.gif","top/dark/scrl_l.gif"],
elcomercio:["elcomercio/p_left.gif","elcomercio/p_middle.gif","elcomercio/p_right.gif", "elcomercio/a_left.png","elcomercio/a_middle.png","elcomercio/a_right.png","elcomercio/p_middle_over.gif",5,6,6,false,false,false];
 };

on the _styles initialization on the dhtmlxtabbar.js javascripts file and worked there, but this approach changes the original javascripts file.

Answer posted by Alex (support) on Sep 08, 2009 07:14

Hello, 

 tabbar_TABS1._styles.elcomercio=[...] should be called before  tabbar_TABS1.setSkin("elcomercio"). Please, check that order is correct

tabbar_TABS1._styles.elcomercio=["elcomercio/p_left.gif","elcomercio/p_middle.gif","elcomercio/p_right.gif", "elcomercio/a_left.png","elcomercio/a_middle.png","elcomercio/a_right.png","elcomercio/p_middle_over.gif",5,6,6,false,false,false];

tabbar_TABS1.setSkin("elcomercio");

tabbar_TABS1.setHrefMode("iframes");

Answer posted by Jose on Sep 10, 2009 07:50

Hi,

Now is working fine. Thanks you. I'll apreciate your help.