Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkupload image
51guest172.70.189.7637fg8j9Sep 13, 2022 9:17:50 AMlinkresources
index.zulzul<?script src="./wzoom.js"?>
<zk>
<style>
.zoomerMouseOverlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
opacity: 0;
}
</style>
<script>
function prepareZoomer(uuid, mediaType){
var imageZoomer = WZoom.create(
zk.$('#'+uuid).$n(),
{
type: mediaType,
maxScale: 5,
minScale: 1
});
window.addEventListener('resize', function () {imageZoomer.prepare();})
}
</script>
<div apply="pkg$.ZoomImageComposer">
<button id="uploadBtn" label="Upload Image" upload="true,maxsize=300">
</button>
<separator />
<vlayout id="pics" style="overflow:auto;" vflex="1"/>
</div>
</zk>ZoomImageComposer.javajavaimport java.text.MessageFormat;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.event.UploadEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.Div;
import org.zkoss.zul.Iframe;
import org.zkoss.zul.Image;
import org.zkoss.zul.Vlayout;
public class ZoomImageComposer extends SelectorComposer<Component> {
@Wire
private Vlayout pics;
private String initScript = "prepareZoomer('%s','%s');";
@Listen(Events.ON_UPLOAD + "=#uploadBtn")
public void doUpload(UploadEvent event) {
org.zkoss.util.media.Media media = event.getMedia();
if (media instanceof org.zkoss.image.Image|| "pdf".equals(media.getFormat())) {
Div containerDiv = new Div();
Div scrollerDiv = new Div();
containerDiv.setStyle("border:3px dotted #222; overflow:auto;");
containerDiv.setWidth("450px");
containerDiv.setHeight("450px");
containerDiv.setParent(pics);
scrollerDiv.setWidth("440px");
scrollerDiv.setHeight("440px");
scrollerDiv.setParent(containerDiv);
if (media instanceof org.zkoss.image.Image) {
Image displayElement = new Image();
displayElement.setZclass("");
displayElement.setHflex("1");
displayElement.setVflex("1");
displayElement.setContent((org.zkoss.image.Image)media);
displayElement.setParent(scrollerDiv);
Clients.evalJavaScript(String.format(initScript, scrollerDiv.getUuid().toString(), "img"));
}
if ("pdf".equals(media.getFormat())) {
Iframe displayElement = new Iframe();
displayElement.setZclass("");
displayElement.setHflex("1");
displayElement.setVflex("1");
displayElement.setContent(media);
displayElement.setParent(scrollerDiv);
Div mouseOverlayElement = new Div();
mouseOverlayElement.setSclass("zoomerMouseOverlay");
//mouseOverlayElement.setParent(scrollerDiv);
//Clients.evalJavaScript(String.format(initScript, scrollerDiv.getUuid().toString(), "html"));
}
}
}
}
wzoom.jsjavascript!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).WZoom=n()}(this,(function(){"use strict";function t(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,n){var e=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==e)return;var o,i,s=[],r=!0,h=!1;try{for(e=e.call(t);!(r=(o=e.next()).done)&&(s.push(o.value),!n||s.length!==n);r=!0);}catch(t){h=!0,i=t}finally{try{r||null==e.return||e.return()}finally{if(h)throw i}}return s}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);"Object"===o&&t.constructor&&(o=t.constructor.name);if("Map"===o||"Set"===o)return Array.from(t);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return n(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,o=new Array(n);e<n;e++)o[e]=t[e];return o}function e(t){var n=t.getBoundingClientRect(),e=document,s=e.body,r=e.documentElement,h=i(),c=o(),a=r.clientTop||s.clientTop||0,l=r.clientLeft||s.clientLeft||0;return{top:n.top+h-a,left:n.left+c-l}}function o(){var t=void 0!==window.pageXOffset,n="CSS1Compat"===(document.compatMode||"");return t?window.pageXOffset:n?document.documentElement.scrollLeft:document.body.scrollLeft}function i(){var t=void 0!==window.pageYOffset,n="CSS1Compat"===(document.compatMode||"");return t?window.pageYOffset:n?document.documentElement.scrollTop:document.body.scrollTop}function s(t,n){if(t&&n)for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e]);return t}function r(t,n,e){var o=arguments.length>3&&void 0!==arguments[3]&&arguments[3];t.addEventListener(n,e,o)}function h(t,n,e){var o=arguments.length>3&&void 0!==arguments[3]&&arguments[3];t.removeEventListener(n,e,o)}function c(){return"ontouchstart"in window||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0}function a(t){return"wheel"===t.type||"pointerup"===t.type||"pointerdown"===t.type||"pointermove"===t.type||"mousedown"===t.type||"mousemove"===t.type||"mouseup"===t.type?t.clientX:t.changedTouches[0].clientX}function l(t){return"wheel"===t.type||"pointerup"===t.type||"pointerdown"===t.type||"pointermove"===t.type||"mousedown"===t.type||"mousemove"===t.type||"mouseup"===t.type?t.clientY:t.changedTouches[0].clientY}function u(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};this._dropHandler=this._dropHandler.bind(this),this._grabHandler=this._grabHandler.bind(this),this._moveHandler=this._moveHandler.bind(this),e.smoothExtinction=Number(e.smoothExtinction),isNaN(e.smoothExtinction)&&(e.smoothExtinction=.25),this.options=s({smoothExtinction:.25,onGrab:null,onMove:null,onDrop:null},e),this.isTouch=c(),this.events=this.isTouch?{grab:"touchstart",move:"touchmove",drop:"touchend"}:{grab:"mousedown",move:"mousemove",drop:"mouseup"},this.events.options=!!this.isTouch&&{passive:!1},this.window=t,this.content=n,r(this.content.$element,this.events.grab,this._grabHandler,this.events.options)}function p(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._init=this._init.bind(this),this._prepare=this._prepare.bind(this),this._computeNewScale=this._computeNewScale.bind(this),this._computeNewPosition=this._computeNewPosition.bind(this),this._transform=this._transform.bind(this),this._wheelHandler=m.bind(this),this._downHandler=d.bind(this),this._upHandler=f.bind(this),this._zoomTwoFingers_TouchmoveHandler=g.bind(this),this._zoomTwoFingers_TouchendHandler=w.bind(this),this.content={},this.window={},this.isTouch=!1,this.events=null,this.direction=1,this.options=null,this.dragScrollable=null,this.coordsOnMouseDown=null;var e={type:"image",width:null,height:null,dragScrollable:!0,dragScrollableOptions:{},minScale:null,maxScale:1,speed:50,zoomOnClick:!0,watchImageChange:!0,smoothExtinction:.3,alignContent:"center",disableWheelZoom:!1};if("string"==typeof t)this.content.$element=document.querySelector(t);else{if(!(t instanceof HTMLElement))throw"WZoom: `selectorOrHTMLElement` must be selector or HTMLElement, and not ".concat({}.toString.call(t));this.content.$element=t}if(this.isTouch=c(),this.events=this.isTouch?{down:"touchstart",up:"touchend"}:{down:"mousedown",up:"mouseup"},this.events.options=!!this.isTouch&&{passive:!0},this.content.$element)if(n.smoothExtinction=Number(n.smoothExtinction),isNaN(n.smoothExtinction)&&(n.smoothExtinction=e.smoothExtinction),this.options=s(e,n),this.options.minScale&&this.options.minScale>=this.options.maxScale&&(this.options.minScale=null),this.window.$element=this.content.$element.parentNode,"image"===this.options.type){var o=!1;this.content.$element.complete&&(this._init(),o=!0),o&&!0!==this.options.watchImageChange||r(this.content.$element,"load",this._init,!this.options.watchImageChange&&{once:!0})}else this._init()}function m(t){this.options.disableWheelZoom||(t.preventDefault(),this._transform(this._computeNewPosition(this._computeNewScale(t.deltaY),{x:a(t),y:l(t)})))}function d(t){(this.isTouch&&1===t.touches.length||1===t.buttons)&&(this.coordsOnMouseDown={x:a(t),y:l(t)})}function f(t){this.coordsOnMouseDown&&this.coordsOnMouseDown.x===a(t)&&this.coordsOnMouseDown.y===l(t)&&(this._transform(this._computeNewPosition(1===this.direction?this.content.maxScale:this.content.minScale,{x:a(t),y:l(t)})),this.direction*=-1),this.coordsOnMouseDown=null}function g(t){if(2===t.targetTouches.length){var n=t.targetTouches[0].clientX,e=t.targetTouches[0].clientY,o=t.targetTouches[1].clientX,i=t.targetTouches[1].clientY,s=Math.round(Math.sqrt(Math.pow(Math.abs(n-o),2)+Math.pow(Math.abs(e-i),2))),r=0;if(s>this.fingersHypot+5&&(r=-1),s<this.fingersHypot-5&&(r=1),0!==r){if(null!==this.fingersHypot||1===r){var h=new Event("wheel");h.deltaY=r,h.clientX=Math.min(n,o)+Math.abs(n-o)/2,h.clientY=Math.min(e,i)+Math.abs(e-i)/2,this._wheelHandler(h)}this.fingersHypot=s,this.zoomPinchWasDetected=!0}}}function w(){this.zoomPinchWasDetected&&(this.fingersHypot=null,this.zoomPinchWasDetected=!1)}function v(t,n,e,o,i,s){var r=i/2-(t+n-e)+o;return r*s-r+o}function y(t,n,e,o,i){switch(t.alignContent){case"left":o/2-i<n/2&&(i=(o-n)/2);break;case"right":o/2+i<n/2&&(i=(o-n)/2*-1);break;default:if((o-n)/2+e<Math.abs(i))i=((o-n)/2+e)*(i<0?-1:1)}return i}return u.prototype={constructor:u,window:null,content:null,isTouch:!1,isGrab:!1,events:null,moveTimer:null,options:{},coordinates:null,speed:null,_grabHandler:function(t){(this.isTouch&&1===t.touches.length||1===t.buttons)&&(t.preventDefault(),this.isGrab=!0,this.coordinates={left:a(t),top:l(t)},this.speed={x:0,y:0},r(document,this.events.drop,this._dropHandler,this.events.options),r(document,this.events.move,this._moveHandler,this.events.options),"function"==typeof this.options.onGrab&&this.options.onGrab(t))},_dropHandler:function(t){t.preventDefault(),this.isGrab=!1,h(document,this.events.drop,this._dropHandler),h(document,this.events.move,this._moveHandler),"function"==typeof this.options.onDrop&&this.options.onDrop(t)},_moveHandler:function(t){if(this.isTouch&&t.touches.length>1)return!1;t.preventDefault();var n=this.window,e=this.content,o=this.speed,i=this.coordinates,s=this.options;o.x=a(t)-i.left,o.y=l(t)-i.top,clearTimeout(this.moveTimer),this.moveTimer=setTimeout((function(){o.x=0,o.y=0}),50);var r=e.currentLeft+o.x,h=e.currentTop+o.y,c=(e.currentWidth-n.originalWidth)/2+e.correctX,u=(e.currentHeight-n.originalHeight)/2+e.correctY;Math.abs(r)<=c&&(e.currentLeft=r),Math.abs(h)<=u&&(e.currentTop=h),function(t,n,e){var o=n.left,i=n.top,s=n.scale;e.smoothExtinction?t.style.transition="transform ".concat(e.smoothExtinction,"s"):t.style.removeProperty("transition");t.style.transform="translate3d(".concat(o,"px, ").concat(i,"px, 0px) scale(").concat(s,")")}(e.$element,{left:e.currentLeft,top:e.currentTop,scale:e.currentScale},this.options),i.left=a(t),i.top=l(t),"function"==typeof s.onMove&&s.onMove(t)},destroy:function(){for(var t in h(this.content.$element,this.events.grab,this._grabHandler,this.events.options),this)this.hasOwnProperty(t)&&(this[t]=null)}},p.prototype={constructor:p,_init:function(){this._prepare(),this.isTouch&&(this.fingersHypot=null,this.zoomPinchWasDetected=!1,r(this.content.$element,"touchmove",this._zoomTwoFingers_TouchmoveHandler),r(this.content.$element,"touchend",this._zoomTwoFingers_TouchendHandler)),!0===this.options.dragScrollable&&(this.dragScrollable&&this.dragScrollable.destroy(),this.setDragScrollable(new u(this.window,this.content,this.options.dragScrollableOptions))),r(this.content.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(r(this.content.$element,this.events.down,this._downHandler,this.events.options),r(this.content.$element,this.events.up,this._upHandler,this.events.options))},_prepare:function(){var n=e(this.window.$element);this.window.originalWidth=this.window.$element.offsetWidth,this.window.originalHeight=this.window.$element.offsetHeight,this.window.positionLeft=n.left,this.window.positionTop=n.top,"image"===this.options.type?(this.content.originalWidth=this.options.width||this.content.$element.naturalWidth,this.content.originalHeight=this.options.height||this.content.$element.naturalHeight):(this.content.originalWidth=this.options.width||this.content.$element.offsetWidth,this.content.originalHeight=this.options.height||this.content.$element.offsetHeight),this.content.minScale=this.options.minScale||Math.min(this.window.originalWidth/this.content.originalWidth,this.window.originalHeight/this.content.originalHeight),this.content.maxScale=this.options.maxScale,this.content.currentWidth=this.content.originalWidth*this.content.minScale,this.content.currentHeight=this.content.originalHeight*this.content.minScale;var o=function(t,n,e){var o=0,i=0;switch(t.alignContent){case"left":o=(n.currentWidth-e.originalWidth)/2;break;case"top":i=(n.currentHeight-e.originalHeight)/2;break;case"right":o=(n.currentWidth-e.originalWidth)/2*-1;break;case"bottom":i=(n.currentHeight-e.originalHeight)/2*-1}return[o,i]}(this.options,this.content,this.window),i=t(o,2),s=i[0],r=i[1];this.content.alignPointX=s,this.content.alignPointY=r;var h=function(t,n,e){var o=Math.max(0,(e.originalWidth-n.currentWidth)/2),i=Math.max(0,(e.originalHeight-n.currentHeight)/2);"left"===t.alignContent?o*=2:"right"===t.alignContent&&(o=0);"bottom"===t.alignContent?i*=2:"top"===t.alignContent&&(i=0);return[o,i]}(this.options,this.content,this.window),c=t(h,2),a=c[0],l=c[1];this.content.correctX=a,this.content.correctY=l,this.content.currentLeft=this.content.alignPointX,this.content.currentTop=this.content.alignPointY,this.content.currentScale=this.content.minScale,this.content.$element.style.transform="translate3d(".concat(this.content.alignPointX,"px, ").concat(this.content.alignPointY,"px, 0px) scale(").concat(this.content.minScale,")"),"function"==typeof this.options.prepare&&this.options.prepare()},_computeNewScale:function(t){this.direction=t<0?1:-1;var n=this.content,e=n.minScale,o=n.maxScale,i=n.currentScale+this.direction/this.options.speed;return i<e?this.direction=1:i>o&&(this.direction=-1),i<e?e:i>o?o:i},_computeNewPosition:function(t,n){var e=n.x,s=n.y,r=this.window,h=this.content,c=h.originalWidth*t,a=h.originalHeight*t,l=o(),u=i(),p=v(e,l,r.positionLeft,h.currentLeft,r.originalWidth,c/h.currentWidth),m=v(s,u,r.positionTop,h.currentTop,r.originalHeight,a/h.currentHeight);-1===this.direction&&(p=y(this.options,r.originalWidth,h.correctX,c,p),m=y(this.options,r.originalHeight,h.correctY,a,m)),t===this.content.minScale&&(p=this.content.alignPointX,m=this.content.alignPointY);var d={currentLeft:h.currentLeft,newLeft:p,currentTop:h.currentTop,newTop:m,currentScale:h.currentScale,newScale:t};return h.currentWidth=c,h.currentHeight=a,h.currentLeft=p,h.currentTop=m,h.currentScale=t,d},_transform:function(t){t.currentLeft;var n=t.newLeft;t.currentTop;var e=t.newTop;t.currentScale;var o=t.newScale;this.options.smoothExtinction?this.content.$element.style.transition="transform ".concat(this.options.smoothExtinction,"s"):this.content.$element.style.removeProperty("transition"),this.content.$element.style.transform="translate3d(".concat(n,"px, ").concat(e,"px, 0px) scale(").concat(o,")"),"function"==typeof this.options.rescale&&this.options.rescale()},_zoom:function(t,n){void 0!==n&&void 0!==n.x&&void 0!==n.y||(n=function(t){var n=e(t.$element);return{x:n.left+t.originalWidth/2-o(),y:n.top+t.originalHeight/2-i()}}(this.window)),this._transform(this._computeNewPosition(t,n))},prepare:function(){this._prepare()},zoomUp:function(){this._zoom(this._computeNewScale(-1))},zoomDown:function(){this._zoom(this._computeNewScale(1))},maxZoomUp:function(){this._zoom(this.content.maxScale)},maxZoomDown:function(){this._zoom(this.content.minScale)},zoomUpToPoint:function(t){this._zoom(this._computeNewScale(-1),t)},zoomDownToPoint:function(t){this._zoom(this._computeNewScale(1),t)},maxZoomUpToPoint:function(t){this._zoom(this.content.maxScale,t)},setDragScrollable:function(t){this.dragScrollable=t},destroy:function(){for(var t in this.content.$element.style.transform="","image"===this.options.type&&h(this.content.$element,"load",this._init),this.isTouch&&(h(this.content.$element,"touchmove",this._zoomTwoFingers_TouchmoveHandler),h(this.content.$element,"touchend",this._zoomTwoFingers_TouchendHandler)),h(this.content.$element,"wheel",this._wheelHandler),this.options.zoomOnClick&&(h(this.content.$element,this.events.down,this._downHandler,this.events.options),h(this.content.$element,this.events.up,this._upHandler,this.events.options)),this.dragScrollable&&this.dragScrollable.destroy(),this)this.hasOwnProperty(t)&&(this[t]=null)}},p.create=function(t,n){return new p(t,n)},p}));