0

How to create a push button in ZK?

asked 2010-09-28 22:25:38 +0800

arctrev gravatar image arctrev
30 1

Hi All,

Let's say i want to create a toolbar [bold,italic,underline] like in ms office, when i choose , this button(or toolbarbutton or else) will stay pushed (or flat or down). Anyone know how to create a button that stay pushed?

I tried with toolbarbutton, it leave a rectangle mark indicate this toolbarbutton was pushed but when it lost focus, this mark disappear too.


Thanks,

Frederick

delete flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2010-10-03 23:52:40 +0800

RyanWu gravatar image RyanWu
533 2
about.me/flyworld

use "menubar" instead ?

link publish delete flag offensive edit

answered 2010-10-04 08:37:06 +0800

arctrev gravatar image arctrev
30 1

Menubar will just bounce back to its original state after release the mouse, I am looking for button that stay pressed/pushed even after I release my mouse. Any trick?

Thanks

link publish delete flag offensive edit

answered 2010-10-04 12:31:59 +0800

twiegand gravatar image twiegand
1807 3

Arctrev,

How about setting the button to disabled after the user clicks it. I think you could probably set up your CSS so it would look any way you'd like. Consider the following code:

<zk>
	<div>
		<separator />
		<button label="Click Me">
			<attribute name="onClick">
				self.setDisabled(true);
			</attribute>
		</button>
		<separator />
		<menubar id="menubar" width="50%">
			<menu label="Project" image="http://www.zkoss.org/zksandbox/img/Centigrade-Widget-Icons/Briefcase-16x16.png">
				<menupopup>
					<menuitem image="http://www.zkoss.org/zksandbox/img/Centigrade-Widget-Icons/BriefcaseSpark-16x16.png" label="New"
						onClick="self.setDisabled(true);" />
					<menuitem image="http://www.zkoss.org/zksandbox/img/Centigrade-Widget-Icons/BriefcaseOpen-16x16.png" label="Open"
						onClick="self.setDisabled(true);" />
					<menuitem image="http://www.zkoss.org/zksandbox/img/Centigrade-Widget-Icons/DisketteBlack-16x16.png" label="Save"
						onClick="self.setDisabled(true);" />
					<menuseparator />
					<menuitem label="Exit" image="http://www.zkoss.org/zksandbox/img/Centigrade-Widget-Icons/DoorOpen-16x16.png" onClick="self.setDisabled(true);" />
				</menupopup>
			</menu>	
		</menubar>
	</div>
</zk>

Try clicking the button and/or any of the menu items and you'll see the effect.

Just a thought...

Regards,

Todd

link publish delete flag offensive edit

answered 2010-10-08 15:28:38 +0800

koray gravatar image koray
15

just use css pseudo class button:active and then give it some rules. If you set border: 1px inset #000 for the active state, it will look like it's pressed. You'll probably have to play aroudn with it for a bit.

link publish delete flag offensive edit

answered 2010-10-10 21:06:29 +0800

arctrev gravatar image arctrev
30 1

Hi guys,

Koray's method works great, play with css do the trick very well.

Thanks
Frederick

link publish delete flag offensive edit

answered 2010-10-15 20:46:44 +0800

amandak695 gravatar image amandak695
3

updated 2010-10-15 20:47:53 +0800

Thanks you for the post.

__________________

watch movies online for free

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-09-28 22:25:38 +0800

Seen: 720 times

Last updated: Oct 15 '10

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