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 AMlinkLOG
18guest140.182.5.8821usgoeFeb 2, 2015 5:39:28 PMlinkresources
index.zulzul
<zk>
<style>
.expandheightmain {
width: 100%;
height: 100%;
position: relative
}
.expandheightmain .left {
margin-left: 5px;
width: 100%;
height: 100%;
}
.expandheightmain .right {
margin-left: 5px;
width: 100%;
height: 100%;
}
.save {
background: #00A1F2; /* Old browsers */
color: #FFF;
display: inline-block;
text-shadow: #DEA4D6;
text-decoration: none;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
padding: 7px 14px;
/*border-radius: 6px;*/
/*margin-top:10px;*/
border: 1px solid #00a1f2;
}
.save:hover {
opacity:0.7;
cursor: pointer;
text-decoration: none;
color:white;
transition:opacity .2s;
}
.save:active {
-moz-box-shadow: 0 0 3px #DEA4D6 inset;
-webkit-box-shadow: 0 0 3px #DEA4D6 inset;
box-shadow: 1px 1px 4px 1px #31ACD6 inset;
}
.saveDisabled, .cancel {
background-color: #f3f3f3;
border: 1px solid #C0C0C0;
color: #999;
text-decoration: none;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
padding: 7px 14px;
/*border-radius: 6px;*/
}
.saveDisabled:hover, .cancel:hover {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
transition:opacity .2s;
}
.trashImg {
background-color: #f6f6f6;
cursor:pointer;
padding:4px;
border:1px solid #C0C0C0;
}
.trashImg:hover
{
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
transition:opacity .2s;
}
.iftttPreview:hover {
text-decoration: none;
}
.iftttStandardLink {
display: inline-block;
color: #2c82ff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 7px 13px;
text-decoration: none;
}
.iftttStandardLink {
padding:0px;
}
.iftttStandardLink:hover {text-decoration:underline;}
.iftttSelector {
background-color: #e5e5e5;
border: 1px solid #ddd;
display: inline-block;
color: #878787;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial,
sans-serif;
font-size: 16px;
font-weight: bold;
padding: 10px 30px;
text-decoration: none;
text-shadow: 1px 1px 1px #f8f8f8;
}
.iftttSelector:hover {
background-color: #eee;
border: 1px solid #ddd;
display: inline-block;
color: #878787;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial,
sans-serif;
font-size: 16px;
font-weight: bold;
padding: 10px 30px;
text-decoration: none;
text-shadow: 1px 1px 1px #f8f8f8;
}
.iftttSelectorActive {
background-color: #d1d1d1;
border: 1px solid #ddd;
display: inline-block;
color: #878787;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial,
sans-serif;
font-size: 16px;
font-weight: bold;
padding: 10px 30px;
text-decoration: none;
text-shadow: 1px 1px 1px #f8f8f8;
-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2) inset;
-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2) inset;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2) inset;
}
.iftttSelectorDisabled {
background-color: #eee;
}
.iftttSelectorDone {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.iftttSelectorRequired {
-moz-box-shadow: 0 0 12px rgba(205, 89, 247, .5);
-webkit-box-shadow: 0 0 12px rgba(205, 89, 247, .5);
box-shadow: 0 0 12px rgba(205, 89, 247, .5);
}
.iftttChannelButton {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 6px;
width: 180px;
}
.iftttChannelButton:hover {
text-decoration: underline;
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
cursor:pointer;
}
.iftttChannelButton:active {
color: #CD59F7;
}
.iftttChannelButtonActive {
color: #CD59F7;
}
.iftttChannelLink, .iftttChannelEditLink {
display: block;
color: #2c82ff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
margin: auto;
text-align: center;
text-decoration: none;
padding:4px 35px;
font-size:15px;
}
.iftttChannelLinkNoContent {
display: block;
color: #aaa;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
margin: auto;
text-align: center;
text-decoration: none;
}
.iftttChannelEditLink {
font-size:13px;
color:#777;
}
.iftttAnyTextbox {
border-left: 0px;
padding-left: 3px;
border-radius: 0px 5px 5px 0px;
border-color: #777777;
height: 14px;
margin-right: -2px;
}
.iftttCombo .z-combobox, .iftttCombo.z-bandbox, .iftttCombo .z-datebox {
border: 0;
padding: 0;
margin-top: -2px;
white-space: nowrap;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
overflow-x: hidden;
}
.iftttCombo .z-combobox-inp, .iftttCombo .z-bandbox-inp, .iftttCombo .z-datebox-inp {
padding: 7px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
background: #f8f8f8;
border: 1px solid #bbb;
position: relative;
left:-18px;
overflow-x: hidden;
}
.iftttCombo .z-combobox, .iftttCombo .z-combobox-btn, .iftttCombo .z-bandbox .iftttCombo .z-bandbox-btn {
background: transparent no-repeat 0 6px;
background-image: url('http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_arrow_down.png');
cursor: pointer;
border: 0;
overflow: hidden;
padding: 0;
display: -moz-inline-box;
display: inline-block;
margin-left: -20px;
margin-top: 4px;
position: relative; left:-18px;
overflow-x: hidden;
}
.iftttAnyCombo .z-combobox, .iftttCombo.z-bandbox, .iftttAnyCombo .z-datebox, .iftttAnyCombo .z-textbox {
border: 0;
padding: 0;
margin-top: -2px;
white-space: nowrap;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
overflow-x: hidden;
}
.iftttAnyCombo .z-combobox-inp, .iftttAnyCombo .z-bandbox-inp, .iftttAnyCombo .z-datebox-inp, .iftttAnyCombo .z-textbox {
padding: 7px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
background: #f8f8f8;
border: 1px solid #bbb;
overflow-x: hidden;
}
.iftttAnyCombo .z-combobox, .iftttAnyCombo .z-combobox-btn, .iftttAnyCombo .z-bandbox .iftttAnyCombo .z-bandbox-btn {
background: transparent no-repeat 0 6px;
background-image: url('http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_arrow_down.png');
cursor: pointer;
border: 0;
overflow: hidden;
padding: 0;
display: -moz-inline-box;
display: inline-block;
margin-left: -20px;
border-radius: 5px 0 0 5px;
overflow-x: hidden;
}
.iftttHeaderDiv {
background-color: #4F4F4F;
width: 100%;
}
.iftttHeading {
font-size:20pt;
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
color:#e2e2e2;
padding: 5px 10px;
}
.iftttAddAnotherLink {
display: inline-block;
color: #2c82ff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 15px;
text-decoration: none;
}
.iftttAddAnotherLink:hover {
text-decoration:underline;
}
.iftttWonderbar, .iftttWonderbarWithLabel, .ifttWonderbarLookingTextbox, .ifttWonderbarLookingTextboxWithoutCombo {
padding: 7px;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
border: 1px solid rgb(187, 187, 187);
position: relative;
left:-18px;
overflow-x: hidden;
background-color: rgb(248, 248, 248);
}
.ifttWonderbarLookingTextboxWithoutCombo {
background: #f8f8f8;
left:0px;
}
.iftttWonderbarWithLabel {
left:0px;
}
.iftttTextArea {
border: thin solid #bbb;
background: #f8f8f8;
padding:8px;
}
.iftttInputLabel {
color:grey;
font-size:14px;
}
.ifttt-z-listbox { margin-top:15px; background: #f8f8f8; border: 1px solid #bbb; overflow: hidden; zoom: 1; overflow-y:auto; overflow-x:hidden; }
.ifttt-z-listbox tr.z-listitem, tr.z-listitem a,
.ifttt-z-listbox tr.z-listitem a:visited {background-color: #f8f8f8 !important;}
.ifttt-z-listbox tr.z-listitem td.z-listitem-focus {background-image: none;}
.ifttt-z-listbox tr.z-listitem-seld { background-color: #0face0 !important; border: none; color: #fff; }
.ifttt-z-listbox tr.z-listitem-over { background: #00A1F2 !important;
border: none; color: #fff; cursor: pointer; }
.ifttt-z-listbox tr.z-listitem-over-seld {background: #0face0 !important;}
.ifttt-z-listbox div.z-listcell-cnt {font-size: 14px; padding:5px 3px;}
.iftttEnableRuleCheckbox, .iftttEnableRuleCheckboxDisabled {
font-size:14px;
font-family: "Helvetica Neue",Arial, Helvetica, sans-serif;
color:#000000;
}
.iftttEnableRuleCheckboxDisabled {
color:#C0C0C0;
}
.ifttt-z-listbox-nohover, .ifttt-z-listbox-maint { margin-top:15px; background: #f8f8f8; border: 1px solid #bbb; overflow: hidden; zoom: 1; overflow-y:auto; overflow-x:hidden; }
.ifttt-z-listbox-nohover tr.z-listitem, tr.z-listitem a,
.ifttt-z-listbox-nohover tr.z-listitem a:visited {background-color: #f8f8f8 !important;}
.ifttt-z-listbox-nohover tr.z-listitem td.z-listitem-focus {background-image: none;}
.ifttt-z-listbox-nohover tr.z-listitem-seld { background-color: #f8f8f8 !important; border: none; }
.ifttt-z-listbox-nohover tr.z-listitem-over { cursor: pointer;}
.ifttt-z-listbox-nohover tr.z-listitem-over-seld {background: #f8f8f8 !important;}
.ifttt-z-listbox-nohover div.z-listcell-cnt {font-size: 14px; padding:5px 3px;}
.ifttt-z-listbox-maint-nohover, .ifttt-z-listbox-maint { margin-top:15px; background: #f8f8f8; border: 1px solid #bbb; overflow: hidden; zoom: 1; overflow-y:auto; overflow-x:hidden; }
.ifttt-z-listbox-maint-nohover tr.z-listitem, tr.z-listitem a,
.ifttt-z-listbox-maint-nohover tr.z-listitem a:visited {background-color: #f8f8f8 !important;}
.ifttt-z-listbox-maint-nohover tr.z-listitem td.z-listitem-focus {background-image: none;}
.ifttt-z-listbox-maint-nohover tr.z-listitem-seld { background-color: #f8f8f8 !important; border: none; }
.ifttt-z-listbox-maint-nohover tr.z-listitem-over { cursor: default;}
.ifttt-z-listbox-maint-nohover tr.z-listitem-over-seld {background: #f8f8f8 !important;}
.ifttt-z-listbox-maint-nohover div.z-listcell-cnt {font-size: 14px; padding:5px 3px;}
.ifttt-z-listbox-child-nohover { margin-top:15px; border: none; overflow: hidden; zoom: 1; overflow-y:auto; overflow-x:hidden; }
.ifttt-z-listbox-child-nohover tr.z-listitem a,
.ifttt-z-listbox-child-nohover tr.z-listitem a:visited {background-color: #f8f8f8 !important;}
.ifttt-z-listbox-child-nohover tr.z-listitem td.z-listitem-focus {background-image: none;}
.ifttt-z-listbox-child-nohover tr.z-listitem-seld { background-color: #ffffff !important; border: none; }
.ifttt-z-listbox-child-nohover tr.z-listitem-over { background: #ffffff !important; cursor: default;}
.ifttt-z-listbox-child-nohover tr.z-listitem-over-seld {background: #ffffff !important;}
.ifttt-z-listbox-child-nohover div.z-listcell-cnt {font-size: 14px; padding:5px 3px;}
div.z-grid {
border: 1px solid #ddd;
overflow: hidden;
background: none;
margin-top: 15px;
}
div.z-grid-header,
div.z-grid-header th.z-column,
div.z-grid-header tr,
div.z-grid-footer {
border: 0;
overflow: hidden;
width: 100%;
color: #fff;
padding: 5px;
background-color: rgba(0,0,0, .3);
}
div.z-grid-header tr.z-columns,
div.z-grid-header tr.z-auxhead {
background-color: #fff;
background-image:none;
border: 0;
margin-left: -5px;
margin-top: -5px;
}
div.z-column-cnt {
font-size: 16px;
}
div.z-grid-body {
background: white; border: 0; overflow: auto; width: 100%;
}
div.z-grid-footer {
background: #bbb; border-top: 0;
}
div.z-grid-pgi-b {
border-top: 1px solid #bbb; overflow: hidden;
}
tr.z-grid-odd td.z-row-inner,
tr.z-grid-odd {
background: #fff;
}
tr.z-row .z-cell {
background: white;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #ddd;
padding: 8px 10px;
}
tr.z-row td.z-row-inner {
background: white; border-top: none; border-left: none; border-right: none; border-bottom: none;
}
.z-grid .z-label { font-size: 16px; color: #777; }
.ifttt-rule-type-link {
color:black;
font-size:16px;
text-decoration:none;
}
.ifttt-active-rule-type-link-container {
border-bottom:4px solid #FF7BAC;
transition:border-bottom .5s;
}
.ifttt-rule-type-link-container {
border-bottom:4px solid white;
}
.ifttt-clone-link, tr.z-listitem a.ifttt-clone-link {
display: inline-block;
/*color: #2c82ff;*/
color:grey;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 7px 13px;
text-decoration: none;
}
.ifttt-clone-link:hover, tr.z-listitem a.ifttt-clone-link:hover {
color: #2c82ff;
text-decoration:underline;
}
.ifttt .z-tabbox-accordion {
background: none;
}
.ifttt .z-tab-accordion-header {
border: 1px solid #bbb;
}
.ifttt .z-tab-accordion-hm, .ifttt .z-tab-accordion-hl, .ifttt .z-tab-accordion-hr, .ifttt .z-tab-accordion-tl {
background-image: none;
background: #bbb;
}
.ifttt .z-tabbox-accordion, .ifttt .z-tabpanel-accordion, .ifttt .z-tabpanel-accordion-cnt {
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
</style>
<tabbox id="tb" width="100%" height="380px" mold="accordion">
<tabs>
<tab label="Tab 1" class="ifttt" />
<tab label="Tab 2" class="ifttt" />
<tab label="Tab 3" class="ifttt" />
</tabs>
<tabpanels>
<tabpanel>
<div>
Here's something!
</div>
</tabpanel>
<tabpanel>
<include />
</tabpanel>
<tabpanel>
<include />
</tabpanel>
</tabpanels>
</tabbox>
</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");
}
}