Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I have the following code segment to display text and image on tab:
<tabs> <tab label="text1" image="images/image1.gif" /> <tab label="text2" image="images/image2.gif" /> <tab label="text3" image="images/image3.gif" /> <tab label="text4" image="images/image4.gif" /> </tabs> <tabpanels> <tabpanel /> <tabpanel /> </tabpanels>
Presently image is follwed by text. But, I want the reverse.
That is, text followed by image.
How can we achieve right alignment of the image on tab?
Thank you
Hi baskaraninfo,
The order of text and image is hardcoded in the domContent_ function in Tab.js. You can use client side programming to override this function. For example:
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
//...
<tab label="text1" image="images/image1.gif">
<attribute w:name="domContent_">
function () {
var label = zUtl.encodeXML(this.getLabel()),
img = this.getImage();
if (!img) return label;
img = '<img src="' + img + '" align="absmiddle" class="' + this.getZclass() + '-img"/>';
//return label ? img + ' ' + label: img; <- original
return label ? label + ' ' + img: img;
}
</attribute>
</tab>
//...
</zk>
This should give you the desired layout.
Regards,
Simon
Thank you, Simon :)
The code results in the following error:
org.zkoss.zk.ui.metainfo.PropertyNotFoundException: Method, setDomContent_, not found for class org.zkoss.zul.Tab
As am new to Clientside programming, I am missing something.
Is there any detailed documentation available online?
Thank you.
Oops, my bad. I forgot to put my code within <![[CDATA[ ]]> before posting it here.
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
//...
<tab label="text1" image="images/image1.gif">
<attribute w:name="domContent_"><![CDATA[
function () {
var label = zUtl.encodeXML(this.getLabel()),
img = this.getImage();
if (!img) return label;
img = '<img src="' + img + '" align="absmiddle" class="' + this.getZclass() + '-img"/>';
return label ? label + ' ' + img: img;
}
]]></attribute>
</tab>
//...
</zk>
In addition, if you read the source code of Tab.js and mold/tab.js, you'll realize how the Tab component gets translated into HTML elements.
This will help you determine how to work with client side programming and also understand it better.
Simon
Thank you, Simon.
Its Perfect :)
I will refer the source code of Tab.js and mold/tab.js to understand it better.
Thank you.
Asked: 2010-05-18 06:36:47 +0800
Seen: 727 times
Last updated: May 19 '10