0

How to position image after label text on each tab of tabbox?

asked 2010-05-18 06:36:47 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

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

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2010-05-18 20:27:10 +0800

SimonPai gravatar image SimonPai
1696 1

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

link publish delete flag offensive edit

answered 2010-05-19 00:59:16 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

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.

link publish delete flag offensive edit

answered 2010-05-19 01:23:41 +0800

SimonPai gravatar image SimonPai
1696 1

updated 2010-05-19 01:28:36 +0800

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

link publish delete flag offensive edit

answered 2010-05-19 01:36:23 +0800

baskaraninfo gravatar image baskaraninfo
526 2 2 9

Thank you, Simon.

Its Perfect :)

I will refer the source code of Tab.js and mold/tab.js to understand it better.

Thank you.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-05-18 06:36:47 +0800

Seen: 727 times

Last updated: May 19 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More