Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
In my application I want to use a button to close some of the components like pop-ups for example. I know how to make it work but I don't know how to make this button look like a standard close button in ZK. Can I somehow access and use images that are shipped with the framework?
Hi czynga,
The markup skill is usually depend on Firebug or Chrome Developer Tool (again :P).
Use "Inspect Element" can analyse how the visual effect is done.
The button (I don't know which...) may be produced by Image or Div with CSS.
So... please use the "Inspect Element", all secrects in it.
Regards,
Monty Pan
Thanks MontyPan that's rally helpful. So it looks to me that the standard window close button is made out of Div with CSS.
Probably I was not clear enough in my first post. I'm looking for a way of re-using ZK styles/elements for example window close button by something like reference as opposed to re-creating them. Otherwise I would need to keep track of any changes in ZK's CSS and keep it synced with my own styles.
Hi czynga,
As far as I know...
0. Close button of Window is not a (ZK) button, so developer who use ZK can't just reuse it directly.
1. It's ok to reuse CSS, just add sclass attribute on the component.
2. If your component's behavior is similar / extended to Window (in your post),
you can create a class which extend Window or use composite component
Or... give us more information about your feature.
Regards,
Monty Pan
OK so here is what I'm trying to do. I have an input field which is dependant on the date but is not a date itself.
Quick code without bindings and event handlers:
<bandbox readonly="true">
<bandpopup>
<div align="right">
<button id="closeButton" label="x"></button>
</div>
<calendar></calendar>
<button label="Today"></button>
<button label="Tomorrow"></button>
</bandpopup>
</bandbox>Trouble with all popups is that in my opinion on touch devices it's not very intuitive that you have to tap somewhere outside to close them. And then due to the small screen size it's sometimes hard to find an empty space to tap on. So I want to add this closeButton which will close the bandbox in case if someone prefers to do it that way.
Now my problem is that I don't know how to easily make this closeButton look like a standard ZK's window close button. Thanks to your previous posts I have learned that in fact it's not a button but a Div with CSS and that I can reuse it's style with sclass attribute.
So it looks that the solution would be:
<div id="closeButton" sclass="z-something-something"></div>
Right so it turns out it works, I'm amazed how simple it is. Thank you MontyPan :)
I'm using:
<div align="right" sclass="z-window-overlapped-icon z-window-overlapped-close"></div>
The only thing I can't figure out yet is how to make it change the colour on mouse hover (just like with standard ZK "button"). I've tried with:
<div align="right" sclass="z-window-overlapped-icon z-window-overlapped-close z-window-overlapped-icon-over z-window-overlapped-close-over"></div>
Hi czynga,
It's CSS skill. Try this:
<zk>
<style>
.button {
border: 1px solid #ccc;
cursor: pointer;
}
.button:hover{
border-color: #AEAEAE;
}
.button:focus{
border-color: #0CBCFF;
}
</style>
<div sclass="button" />
</zk>Regards,
Monty Pan
I know, but again it's not my intention to create new styles. Instead I want to re use ZK defaults.
What I don't know is why this is not working for hover:
<div align="right" sclass="z-window-overlapped-icon z-window-overlapped-close"></div>
I think zk uses an onmouseover event to change the CSS for the div.
You can achieve the same thing by adding a client side event handler using jquery hover() method, to add or remove the z-window-overlapped-icon-over and z-window-overlapped-close-over classes to the div element.
Check the client-side development references to see how to do this.
Asked: 2012-08-31 03:37:00 +0800
Seen: 237 times
Last updated: Sep 16 '12
