0

How to make a toolbar button highlighted after cliking on it in zk5.0

asked 2012-11-29 06:38:33 +0800

panugave gravatar image panugave
99

Hi All,
How to make the content of the toolbarbutton to be reamined highlihted and the button should be highlighted in another colour after clicking on it in zk 5.0.
i have tried with mode="toggle" attribute, but it didn't worked here.

delete flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2012-12-03 09:35:57 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

You can save the toggle state in Java and use setSclass() method to display it as highlighted.

link publish delete flag offensive edit

answered 2012-12-04 04:57:17 +0800

panugave gravatar image panugave
99

updated 2012-12-04 04:57:39 +0800

Hi Chen,
Will you please provide some sample java code and zul code for this?

link publish delete flag offensive edit

answered 2012-12-13 06:28:32 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi panugave,

Try this:

<zk>
	<style>
		.toggle-highlighted {
			background-color: yellow;
		}
	</style>
	<toolbar>
		<toolbarbutton label="File system" mode="toggle">
			<attribute name="onCheck"><![CDATA[
				if(event.isChecked()){
					self.setSclass("toggle-highlighted");
				} else {
					self.setSclass("");
				}
			]]></attribute>
		</toolbarbutton>
	</toolbar>
</zk>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-12-18 05:28:46 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi,

I guess this is caused by missing space of

href="/PC_Overview.zul"mode="toggle"

please change it to

href="/PC_Overview.zul" mode="toggle"

then try again

link publish delete flag offensive edit

answered 2012-12-19 05:15:14 +0800

panugave gravatar image panugave
99

Hi benbai,
The code you had given is for ZK6x, but i am using ZK5x, i am trying to use the method getZclass(), but unable to solve the issue.
Pls let me know how to use this getZclass() method for highlighting the toolbar button in ZK5x....

link publish delete flag offensive edit

answered 2012-12-19 06:35:48 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi panugave,

Toolbarbutton does not support toggle mode in ZK 5, you can update sclass with onClick event as below:

<zk>
	<style>
		.toggle-highlighted {
			background-color: yellow;
		}
	</style>
	<toolbar>
		<toolbarbutton label="File system">
			<attribute name="onClick"><![CDATA[
				if("toggle-highlighted".equals(self.getSclass())){
					self.setSclass("");
				} else {
					self.setSclass("toggle-highlighted");
				}
			]]></attribute>
		</toolbarbutton>
	</toolbar>
</zk>

Regards,
Ben

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: 2012-11-29 06:38:33 +0800

Seen: 129 times

Last updated: Dec 19 '12

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