Hyperlink in Listitem

asked 2012-03-18 08:10:18 +0800

RichardL
768 ● 4

As the title suggests, I want to have a hyperlink in my Listitem, so I used a native component with the anchor HTML tag. However, no matter how I style it, I can't seem to get the hyperlink to function (I've tried setting it to a high z-index and having absolute positioning). I know a toolbarbutton would work, but I don't want the styling or the extra overhead - I just want a plain hyperlink.

Any ideas?

delete flag offensive retag edit

9 Replies

Sort by » oldest newest

answered 2012-03-18 19:10:13 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

Can this help you?

<listitem>
	<listcell>
		<a href="http://www.zkoss.org"	label="The Link" style="color: blue;" />
	</listcell>
</listitem>

best
Stephan

link publish delete flag offensive edit

answered 2012-03-19 01:10:51 +0800

RichardL
768 ● 4

Hi Stephan,

Thanks, but this is an XHTML component which is also heavier than a native component.

Any other ideas?

Thanks,
Richard

link publish delete flag offensive edit

answered 2012-03-19 02:43:00 +0800

benbai
2228 ● 6
http://www.zkoss.org

updated 2012-03-19 02:43:12 +0800

Hi Richard,

Seems ZK has default style and have to use '!important' to override it.
Try this:

<zk xmlns:n="native">
	<style>
		a:link {color: #000099 !important;}
		a:visited {color: #990099 !important;}
		a:link:active {color: #009999 !important;}
		a:visited:active {color: #999900 !important;}
	</style>
	<listbox>
		<listitem>
			<listcell>
				<n:a href="http://www.zkoss.org">ZK</n:a>
			</listcell>
		</listitem>
	</listbox>
</zk>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-03-19 14:11:34 +0800

RichardL
768 ● 4

Great, thanks Ben!

link publish delete flag offensive edit

answered 2012-03-19 15:12:47 +0800

RichardL
768 ● 4

Hmm...Once an onClick event handler is added to the Listitem, the hyperlink doesn't work.

Is there any way?

link publish delete flag offensive edit

answered 2012-03-20 09:29:24 +0800

benbai
2228 ● 6
http://www.zkoss.org

Seems the widget's doClick_ will terminate the event,
a quick workaround is override the doClick_ method of Listitem,
please test carefully for the possible side effect:

<listitem onClick='System.out.println(" item clicked");'>
	<attribute w:name="doClick_">
		function (evt) {
			if (evt.target.$instanceof(zk.Native)) {
				var wgt = this;
				setTimeout(function () {
					wgt.$doClick_(evt);
				}, 0);
			} else
				this.$doClick_(evt);
		}
	</attribute>
	<listcell>
		<n:a href="http://www.zkoss.org" onclick="">ZK</n:a>
	</listcell>
</listitem>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-03-20 11:31:32 +0800

RichardL
768 ● 4

Thanks again, Ben. It's quiet tricky, isn't it? I wonder if the event termination is the intended behaviour...maybe so bubbling up of javascript events doesn't need to be managed? It would be good if the listbox could allow for this functionality. Anyway, I'll try your workaround and appreciate your efforts.

Cheers,
Richard