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 AMlinkAnother new ZK fiddle
14guest203.88.128.21427ufl28Sep 22, 2015 2:30:10 PMlinkresources
index.zulzul<zk xmlns:c="client">
<style>
.water-mark {
color: gray; font-style: italic;
}
.form {
border: 1px solid #E1E1E1;
background: url('../widgets/effects/form_effect/img/bg.png');
padding: 20px 20px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.form .name {
display: block;
width: 100px;
text-align: center;
}
</style>
<script><![CDATA[
function pwdValid(pwd2) {
var valLabel = jq("$pwd_val");
if (pwd2.getValue() == "") {
zk.Widget.$(valLabel).setValue("Client Side Validation");
} else if (pwd2.getValue() != zk.Widget.$(jq("$pwd")).getValue()) {
zk.Widget.$(valLabel).setValue("Not Match !")
} else {
zk.Widget.$(valLabel).setValue("OK !")
};
}
]]></script>
<div width="500px" class="form">
<vlayout spacing="7px">
<label value="On-line Shopping Info" style="font-size:16px;font-weight:bold;color:gray;" />
<hlayout spacing="20px">
<label class="name" value="Name :" />
<textbox id="username" width='150px' />
Watermark
</hlayout>
<hlayout spacing="20px">
<label class="name" value="Phone :" />
<textbox id="phone" width='150px' />
Mask : (999) 999-9999
</hlayout>
<hlayout spacing="20px">
<label class="name" value="Birthday :" />
<textbox id="date" width='150px' />
<label value="Mask : m9/d9/y999" />
</hlayout>
<hlayout spacing="20px">
<label class="name" value="Country Code:" />
<textbox id="country" width='150px' />
<label value='Mask : AA (Upper-Case)' />
</hlayout>
<hlayout spacing="20px">
<label class="name" value="Credit Card:" />
<textbox id="cc" width='150px' />
<label value='Mask : 9999-9999-9999-9999' />
</hlayout>
<hlayout spacing="20px">
<label class="name" value="Password: " />
<textbox id="pwd" type="password" width="150px" />
</hlayout>
<hlayout spacing="20px">
<label class="name" value="Re-type:" />
<textbox type="password" width="150px" c:onChange='pwdValid(this)' />
<label id="pwd_val" value="Client Side Validation" />
</hlayout>
<button onClick=""/>
</vlayout>
</div>
<div id="result" />
<!-- Load the script -->
<script type="text/javascript" src="jquery.maskedinput.min.js" />
<script type="text/javascript">
zk.afterMount(function() {
$.mask.definitions['A']='[A-Z]';
$.mask.definitions['m']='[01]';
$.mask.definitions['d']='[0123]';
$.mask.definitions['y']='[12]';
console.log(jq("$phone"));
jq("$phone").mask("(999) 999-9999");
jq("$date").mask("m9/d9/y999");
jq("$country").mask("AA");
jq("$cc").mask("9999-9999-9999-9999");
});
</script>
</zk>TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}
jquery.maskedinput.min.jsjavascript/*
jQuery Masked Input Plugin
Copyright (c) 2007 - 2014 Josh Bush (digitalbush.com)
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
Version: 1.4.0
*/
!function(factory) {
"function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery);
}(function($) {
var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua);
$.mask = {
definitions: {
"9": "[0-9]",
a: "[A-Za-z]",
"*": "[A-Za-z0-9]"
},
autoclear: !0,
dataName: "rawMaskFn",
placeholder: "_"
}, $.fn.extend({
caret: function(begin, end) {
var range;
if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin,
this.each(function() {
this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(),
range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin),
range.select());
})) : (this[0].setSelectionRange ? (begin = this[0].selectionStart, end = this[0].selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(),
begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length),
{
begin: begin,
end: end
});
},
unmask: function() {
return this.trigger("unmask");
},
mask: function(mask, settings) {
var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal;
if (!mask && this.length > 0) {
input = $(this[0]);
var fn = input.data($.mask.dataName);
return fn ? fn() : void 0;
}
return settings = $.extend({
autoclear: $.mask.autoclear,
placeholder: $.mask.placeholder,
completed: null
}, settings), defs = $.mask.definitions, tests = [], partialPosition = len = mask.length,
firstNonMaskPos = null, $.each(mask.split(""), function(i, c) {
"?" == c ? (len--, partialPosition = i) : defs[c] ? (tests.push(new RegExp(defs[c])),
null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1), partialPosition > i && (lastRequiredNonMaskPos = tests.length - 1)) : tests.push(null);
}), this.trigger("unmask").each(function() {
function tryFireCompleted() {
if (settings.completed) {
for (var i = firstNonMaskPos; lastRequiredNonMaskPos >= i; i++) if (tests[i] && buffer[i] === getPlaceholder(i)) return;
settings.completed.call(input);
}
}
function getPlaceholder(i) {
return settings.placeholder.charAt(i < settings.placeholder.length ? i : 0);
}
function seekNext(pos) {
for (;++pos < len && !tests[pos]; ) ;
return pos;
}
function seekPrev(pos) {
for (;--pos >= 0 && !tests[pos]; ) ;
return pos;
}
function shiftL(begin, end) {
var i, j;
if (!(0 > begin)) {
for (i = begin, j = seekNext(end); len > i; i++) if (tests[i]) {
if (!(len > j && tests[i].test(buffer[j]))) break;
buffer[i] = buffer[j], buffer[j] = getPlaceholder(j), j = seekNext(j);
}
writeBuffer(), input.caret(Math.max(firstNonMaskPos, begin));
}
}
function shiftR(pos) {
var i, c, j, t;
for (i = pos, c = getPlaceholder(pos); len > i; i++) if (tests[i]) {
if (j = seekNext(i), t = buffer[i], buffer[i] = c, !(len > j && tests[j].test(t))) break;
c = t;
}
}
function androidInputEvent() {
var curVal = input.val(), pos = input.caret();
if (curVal.length < oldVal.length) {
for (checkVal(!0); pos.begin > 0 && !tests[pos.begin - 1]; ) pos.begin--;
if (0 === pos.begin) for (;pos.begin < firstNonMaskPos && !tests[pos.begin]; ) pos.begin++;
input.caret(pos.begin, pos.begin);
} else {
for (checkVal(!0); pos.begin < len && !tests[pos.begin]; ) pos.begin++;
input.caret(pos.begin, pos.begin);
}
tryFireCompleted();
}
function blurEvent() {
// checkVal(), input.val() != focusText && input.change();
var obj = checkVal();
input.val() != focusText && input.change();
if(obj > 1 && obj <= lastRequiredNonMaskPos){
alert('Bad format for input value '+input.val());
setTimeout(function(){
$(input).focus();
},1);
}
}
function keydownEvent(e) {
if (!input.prop("readonly")) {
var pos, begin, end, k = e.which || e.keyCode;
oldVal = input.val(), 8 === k || 46 === k || iPhone && 127 === k ? (pos = input.caret(),
begin = pos.begin, end = pos.end, end - begin === 0 && (begin = 46 !== k ? seekPrev(begin) : end = seekNext(begin - 1),
end = 46 === k ? seekNext(end) : end), clearBuffer(begin, end), shiftL(begin, end - 1),
e.preventDefault()) : 13 === k ? blurEvent.call(this, e) : 27 === k && (input.val(focusText),
input.caret(0, checkVal()), e.preventDefault());
}
}
function keypressEvent(e) {
if (!input.prop("readonly")) {
var p, c, next, k = e.which || e.keyCode, pos = input.caret();
if (!(e.ctrlKey || e.altKey || e.metaKey || 32 > k) && k && 13 !== k && 37!=k && 39!=k) {
if (pos.end - pos.begin !== 0 && (clearBuffer(pos.begin, pos.end), shiftL(pos.begin, pos.end - 1)),
p = seekNext(pos.begin - 1), len > p && (c = String.fromCharCode(k), tests[p].test(c))) {
if (shiftR(p), buffer[p] = c, writeBuffer(), next = seekNext(p), android) {
var proxy = function() {
$.proxy($.fn.caret, input, next)();
};
setTimeout(proxy, 0);
} else input.caret(next);
pos.begin <= lastRequiredNonMaskPos && tryFireCompleted();
}
e.preventDefault();
}
}
}
function clearBuffer(start, end) {
var i;
for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = getPlaceholder(i));
}
function writeBuffer() {
input.val(buffer.join(""));
}
function checkVal(allow) {
var i, c, pos, test = input.val(), lastMatch = -1;
for (i = 0, pos = 0; len > i; i++) if (tests[i]) {
for (buffer[i] = getPlaceholder(i); pos++ < test.length; ) if (c = test.charAt(pos - 1),
tests[i].test(c)) {
buffer[i] = c, lastMatch = i;
break;
}
if (pos > test.length) {
clearBuffer(i + 1, len);
break;
}
} else buffer[i] === test.charAt(pos) && pos++, partialPosition > i && (lastMatch = i);
return allow ? writeBuffer() : partialPosition > lastMatch + 1 ? settings.autoclear || buffer.join("") === defaultBuffer ? (input.val() && input.val(""),
clearBuffer(0, len)) : writeBuffer() : (writeBuffer(), input.val(input.val().substring(0, lastMatch + 1))),
partialPosition ? i : firstNonMaskPos;
}
var input = $(this), buffer = $.map(mask.split(""), function(c, i) {
return "?" != c ? defs[c] ? getPlaceholder(i) : c : void 0;
}), defaultBuffer = buffer.join(""), focusText = input.val();
input.data($.mask.dataName, function() {
return $.map(buffer, function(c, i) {
return tests[i] && c != getPlaceholder(i) ? c : null;
}).join("");
}), input.one("unmask", function() {
input.off(".mask").removeData($.mask.dataName);
}).on("focus.mask", function() {
if (!input.prop("readonly")) {
clearTimeout(caretTimeoutId);
var pos;
focusText = input.val(), pos = checkVal(), caretTimeoutId = setTimeout(function() {
writeBuffer(), pos == mask.replace("?", "").length ? input.caret(0, pos) : input.caret(pos);
}, 10);
}
}).on("blur.mask", blurEvent).on("keydown.mask", keydownEvent).on("keypress.mask", keypressEvent).on("input.mask paste.mask", function() {
input.prop("readonly") || setTimeout(function() {
var pos = checkVal(!0);
input.caret(pos), tryFireCompleted();
}, 0);
}), chrome && android && input.off("input.mask").on("input.mask", androidInputEvent),
checkVal();
});
}
});
});