Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I am using my own zclass for listitems. On a particular action I am changing the zclass of the listitem according to my need.
My listbox can be check marked and multiple selectable. But when I apply my own zclass, the check box appearing on the list item can not be checked. I click on the checkbox but nothing happens.
Here is my zclass for the listitem :
.invisible{
background-color : #FFCCCC;
}
.invisible-seld {
background-color : #FFCCCC;
}
.invisible-over {
background-color : #F8F0D2;
}
.invisible-over-seld {
background-color : #FFEFB2;
}
.invisible-img{
background:none no-repeat scroll center center transparent;
border:0 none;
display:inline-block;
height:13px;
margin:2px;
min-height:13px;
overflow:hidden;
padding:0;
vertical-align:top;
width:13px;
}
.invisible-img-checkbox {
background-image:url("/SmartHopper/zkau/web/721ea1/zul/img/common/check-sprite.gif");
background-position:0 0;
}
I think I will have to change the CSS property
background-position:0 0; to background-position: -26px 0;
Am I correct ? But, I seem to have no idea how it will be done. And, even if I can do this but at what event I need to change the CSS property so that when listitem's checkbox is checked this property changes.
Thanks
Yes you have to modify the background position just like how zk does.
You should prepare different css for checkbox checked and unchecked.
And modify the zclass accordingly.
You may refer to
http://docs.zkoss.org/wiki/Client_Side_Programming
Oh thanks Peter,
I have one question though, as I see the list item checkbox is not a check box, but an image. How do I listen to the click event and determine now I have to set the image as checked and not it's time to change the background position such that image looks like a checkbox that hasn't been checked.
Thank you.
You can look into the source code of
ItemWidget.js
ZK change the class like jQuery, use removeClass() and addClass()
_toggleEffect: function (undo) {
var n = this.$n(),
zcls = this.getZclass();
if (undo) {
jq(n).removeClass(zcls + "-over-seld")
.removeClass(zcls + "-over");
} else {
var $n = jq(n);
$n.addClass($n.hasClass(zcls + "-seld") ? zcls + "-over-seld" : zcls + "-over");
}
},
Peter, thanks for your reply.
To listen to the event, I gotta have access to the html element generated by ZK, and in this case the listcell is converted by ZK to a td and the td has children - a div and a span. This span is basically representing the checkbox, and I can not get to this span. If I try to get the list cells children, I don't get the HtmlNativeComponent with tag name span.
So, eventually, I can not reach the span and hence can not listen for the event.
Any thoughts?
From
http://docs.zkoss.org/wiki/Client_Side_Programming
You can see
Widget -- See the usage of $f(), $n(), bind_(), $()
http://www.zkoss.org/javadoc/latest/jsdoc/zk/Widget.html
$n()
Returns the DOM element that this widget is bound to.
Asked: 2010-05-29 23:50:16 +0800
Seen: 1,204 times
Last updated: Jun 08 '10
