Start Building Professional
Web Apps Today

Tabbar Tab Text Styling

Please read the whole question.

Is there any way to Style the Text of a Tab? Can I put an image on a tab?

I have a tabbar set that represents multiple input form pages. I want to somehow show if the form on a given tab is complete or incomplete. I want the following information on a tab itself:
___________
| TabName |
| COMPLETE\INCOMPLETE | <- ideally, I could color the text of these words


Something like this in the XML spec would be nice:
...
<row><tab id="tab1" width="100px">TabName <br /> <span style="color:red;">INCOMPLETE</span>
<content>
...

Alternately, I could show an image instead of complete or incomplete (such as a checkmark or smily if complete & an X or sad face if incomplete). I want the user to quickly be able to glance and see all the tabs and their status with one glance of the tabbar.
...
<row><tab id="tab1" width="100px">TabName <img src="path/to/smily.gif" />
<content>
...

OR even:
mytabbar.setTabTextDiv( tab_id , divThatContainsWhatGoesOnTheTabItself )



I've already figured out that I can change height of a tab by using
mytabbar = new dhtmlXTabBar("tabbarDiv","top",33);
Though this number doesnt seem to be able to go higher than 33 without separating from the tab content.

Also, I know I can word wrap the tab text with
.dhx_tab_element{whitespace:normal !important;}


Thanks!

~Ben

Thanks!  That worked!

Now, is there anyway I can put html into the tabs via javascript when not loading from XML?

Trying this and I get nothing on the tab:

myTabs.addTab("tab1","<![CDATA[Tab1Name<br /><span style='color:red;'>INCOMPLETE</span>]]>","120px");


also tried:

myTabs.addTab("tab1","","120px");
myTabs.setLabel("tab1","<![CDATA[Tab1Name<br /><span style='color:red;'>INCOMPLETE</span>]]>")

which didn't work either.