Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I'm facing the following problem and unfortunately it's not the first time when I need to change style of complex component.... :-((
I have a tabbox with mold="accordion" and I want different tabs having their text in different color, for example the first one yellow and the second one red.
This is an example:
<zk>
<style>
.yellowtb-accordion-text{
color:yellow;
font-size:11pt;
}
.redtb-accordion-text{
color:red;
font-size:11pt;
}
</style>
<tabbox mold="accordion">
<tabs>
<tab label="First one" sclass="yellowtb"></tab>
<tab label="Second one" sclass="redtb"></tab>
</tabs>
<tabpanels>
<tabpanel>
Hello
</tabpanel>
<tabpanel>
Hello
</tabpanel>
</tabpanels>
</tabbox>
</zk>Probably I have done a mistake, because I think the sclass attribute should be specified as sclass="yellowtb-accordion-text" and sclass="redtb-accordion-text" (not only the prefix). However, also in this case the HTML source generated by ZK engine is the following (not what I'd expect)... so, this is NOT THE SOLUTION...
...
<div id="z_7u_4" class="yellowtb-accordion-text z-tab-accordion z-tab-accordion-seld" z.zcls="z-tab-accordion" z.sel="true" z.box="z_7u_2" z.panel="z_7u_7" z.disabled="false" z.type="zul.tab2.Tab2">
<div align="left" class="z-tab-accordion-header">
<a href="javascript:;" id="z_7u_4!a" class="z-tab-accordion-tl">
<em class="z-tab-accordion-tr">
<span class="z-tab-accordion-tm">
<span class="z-tab-accordion-text">First one</span>
</span>
</em>
</a>
</div>
</div>
...try this, the problem is the weighting of CSS Selector.(".yellowtb span" has more weighting)
After knowing the structure of html by using firebug(a firefox plugin),
then I know to add a "span" after sclass name.
<zk>
<style>
.yellowtb span{
color:yellow;
font-size:11pt;
}
.redtb span{
color:red;
font-size:11pt;
}
</style>
<tabbox mold="accordion">
<tabs>
<tab label="First one" sclass="yellowtb"></tab>
<tab label="Second one" sclass="redtb"></tab>
</tabs>
<tabpanels>
<tabpanel>
Hello
</tabpanel>
<tabpanel>
Hello
</tabpanel>
</tabpanels>
</tabbox>
</zk>
Asked: 2009-04-08 14:06:45 +0800
Seen: 550 times
Last updated: Apr 15 '09
