0

ZK Style guide Help [closed]

asked 2013-04-10 12:57:45 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8
http://emrpms.blogspot.in...

Look at this demo.

On focus of each section, the background color of that section is changed.

Can be done with ZK Groupbox or panel.

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by Senthilchettyin
close date 2013-04-10 14:23:23

1 Answer

Sort by ยป oldest newest most voted
2

answered 2013-04-10 13:43:39 +0800

gganassin gravatar image gganassin flag of Luxembourg
540 6
http://www.hybris.com/

updated 2013-04-10 14:02:46 +0800

<window title="selection decoration" border="normal">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
    var selected;
    $(document).click(function(event) {
        if (selected != null) {
            if (selected.get(0) === $(event.target).closest(".selectionAware").get(0)) return false;
            //selected.toggleClass("selectedObject");
            selected.animate({backgroundColor: 'white'}, 'fast');
        }
        selected = $(event.target).closest(".selectionAware");
        selected.each(function() {
            //selected.toggleClass("selectedObject");
            selected.animate({backgroundColor: 'cyan'}, 'slow');
        });
    });

</script>
<style>
    .selectionAware {
        padding: 10px;
    }
    .selectedObject {
        background-color: cyan;
    }
</style>
<div sclass="selectionAware">
    <label value="field one" />
    <textbox value="" hflex="1" />
</div>
<div sclass="selectionAware">
    <label value="field two" />
    <textbox value="" hflex="1" />
</div>
</window>

It's still highly improvable as code but it gives you the idea.

Both using only the toggle of a css class or the animate effect are working fine. You can easily change the div into what ever you want: hope it helps! Giovanni

link publish delete flag offensive edit

Comments

This can be done only using jquery ? without jquery, just using ZK , it is not possible ?

Senthilchettyin ( 2013-04-10 13:57:46 +0800 )edit

And also, in every page we need to write this ? can we make it our own component ?

Senthilchettyin ( 2013-04-10 14:02:21 +0800 )edit

this is not doable ONLY server-side but you are forced to use listeners client-side natively. Apart from that... you can always rise an event client side and to catch it server side if you need - for example - to know what are the blocks focused by the user for your business needs.

gganassin ( 2013-04-10 14:12:57 +0800 )edit

good work man.But can it possible we can add this on focus with stylesheet?

sjoshi ( 2013-04-10 14:29:41 +0800 )edit

that's a good question sjoshi: will try to think about it.

gganassin ( 2013-04-10 16:08:42 +0800 )edit

Question tools

Follow
1 follower

RSS

Stats

Asked: 2013-04-10 12:57:45 +0800

Seen: 33 times

Last updated: Apr 10 '13

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