ZK Style guide Help [closed]

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

gganassin
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