Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

frozen scroll

1guest172.69.33.373j82a06Mar 28, 2024 8:03:44 AMlink

Gmarker and forEach

1guest172.68.67.1362lpvk1hMar 28, 2024 7:29:50 AMlink

Gmaps

1guest172.68.67.1363dvghg5Mar 28, 2024 7:28:20 AMlink

grid demo

5guest172.71.158.2371grhhu3Mar 27, 2024 7:46:36 AMlink

grid demo

4guest172.71.158.2371grhhu3Mar 27, 2024 7:46:25 AMlink

grid demo

3guest172.71.154.181grhhu3Mar 27, 2024 7:44:16 AMlink

grid demo

2guest172.71.154.181grhhu3Mar 27, 2024 7:43:58 AMlink

grid demo

1guest172.71.154.191grhhu3Mar 27, 2024 7:42:54 AMlink

Scrollable Panel

13guest172.69.223.193ctlblaMar 27, 2024 5:31:21 AMlink

Scrollable Panel

12guest172.69.223.194ctlblaMar 27, 2024 5:30:56 AMlink

border color

1guest193.169.102.113vk5n5Aug 13, 2019 2:20:05 PMlink

resources

index.zulzul<zk> <style src="style.css"></style> <window id="winLogin" title="Foundation Login" width="350px" border="none" position="center" mode="modal" sclass="square blue"> <groupbox> <div sclass="avatar"></div> <h:form id="f" name="f" method="POST" xmlns:h="native"> <grid sclass="fgrid"> <columns> <column align="center" label="" /> </columns> <rows> <!-- User could be modified by using login.l_user --> <row> <textbox id="u" name="j_username" sclass="ftextbox" placeholder="Username"/> </row> <!-- User could be modified by using login.l_password --> <row> <textbox id="p" type="password" name="j_password" sclass="ftextbox" placeholder="•••••••••"/> </row> <row> <button id="buttons" onClick="submit" label="Login" sclass="square blue"/> </row> </rows> </grid> </h:form> </groupbox> </window> </zk>style.csscss/* Start: Modal window ---------------------------------------------- */ .z-window-modal-hm, .z-window-modal-br, .z-window-modal-cr, .z-window-modal-cl, .z-window-modal-hr, .z-window-modal-tr, .z-window-modal-hl{ background-image: none; background-color: #eee; } .z-window-modal-header, .z-window-modal-header-noborder { padding-top : 10px; padding-right : 0px; padding-bottom : 10px; padding-left : 0; margin-right: 0px; } /* End: Modal Window ---------------------------------------------- */ /* Start: Form Grid ---------------------------------------------- */ .fgrid tr.z-row td.z-row-inner, tr.z-row, div.z-grid-body div.z-cell, div.z-grid { border: none; overflow: hidden; zoom: 1; background: white; border-top: none; border-left: none; border-right: none; border-bottom: none; } .avatar{ background:url(https://myaccount.pmailer.net/templates/pmailer5/images/login-people.jpg) no-repeat center; background-size: 30%; height: 80px; margin-bottom:15px; margin-top:15px; } /* End: Form Grid ---------------------------------------------- */ /* Start: Form TextBox ---------------------------------------------- */ .ftextbox.z-textbox.z-textbox-focus { border-style : solid; border-width : 1px; border-color : blue; } .ftextbox.z-textbox{ } /* End: Form TextBox ---------------------------------------------- */ /* Start: Combo Box ---------------------------------------------- */ .fcombofocus.z-combobox.z-combobox-focus .z-combobox-inp{ border-style : solid; border-width : 1px; border-color : blue; } /* End: Combox Box ---------------------------------------------- */ /* Start: Input Form Title ---------------------------------------------- */ .flbltitle.z-label { font-size : 14px; font-weight : bolder; color:#0C6BA8; } /* End: Input Form Title ---------------------------------------------- */ /* Start: Input Form Label ---------------------------------------------- */ .flabel.z-label { font-size : 12px; font-family: verdana,arial,sans-serif; } /* End: Input Form Label ---------------------------------------------- */ /* Start: Required Field asterix ---------------------------------------------- */ .flblreq.z-label { font-size : 16px; font-weight : bolder; color:red; } /* End: Required Field asterix ---------------------------------------------- */ /* button ---------------------------------------------- */ .mybutton.z-button .z-button-cm { background-image: none; color: white; font-weight : bolder; } .mybutton.z-button .z-button-tm, .z-button .z-button-bm { background-image: none; } .mybutton.z-button .z-button-cl, .z-button .z-button-cr { background-image: none; } .mybutton.z-button .z-button-tl { background-image: none; } .mybutton.z-button .z-button-bl { background-image: none; } .mybutton.z-button .z-button-tr { background-image: none; } .mybutton.z-button .z-button-br { background-image: none; } .button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; } .bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } .square { -webkit-border-radius: 0em; -moz-border-radius: 0em; border-radius: 0em; } .medium { font-size: 12px; padding: .4em 1.5em .42em; } .small { font-size: 11px; padding: .2em 1em .275em; } /* color styles ---------------------------------------------- */ /* black */ .black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); } .black:hover { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); } .black:active { color: #666; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); } /* gray */ .gray { color: #e9e9e9; border: solid 1px #555; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); } .gray:hover { background: #616161; background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)); background: -moz-linear-gradient(top, #757575, #4b4b4b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b'); } .gray:active { color: #afafaf; background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)); background: -moz-linear-gradient(top, #575757, #888); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888'); } /* white */ .white { color: #606060; border: solid 1px #b7b7b7; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); } .white:hover { background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); background: -moz-linear-gradient(top, #fff, #dcdcdc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); } .white:active { color: #999; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); background: -moz-linear-gradient(top, #ededed, #fff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); } /* orange */ .orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .orange:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .orange:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); } /* red */ .red { color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); } .red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); } .red:active { color: #de898c; background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)); background: -moz-linear-gradient(top, #aa1317, #ed1c24); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24'); } /* blue */ .blue { color: #d9eef7; border: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); } .blue:hover { background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); } .blue:active { color: #80bed6; background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); background: -moz-linear-gradient(top, #0078a5, #00adee); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); } /* rosy */ .rosy { color: #fae7e9; border: solid 1px #b73948; background: #da5867; background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)); background: -moz-linear-gradient(top, #f16c7c, #bf404f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f'); } .rosy:hover { background: #ba4b58; background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)); background: -moz-linear-gradient(top, #cf5d6a, #a53845); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845'); } .rosy:active { color: #dca4ab; background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c)); background: -moz-linear-gradient(top, #bf404f, #f16c7c); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c'); } /* green */ .green { color: #e8f0de; border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); background: -moz-linear-gradient(top, #7db72f, #4e7d0e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); } .green:hover { background: #538018; background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); background: -moz-linear-gradient(top, #6b9d28, #436b0c); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c'); } .green:active { color: #a9c08c; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); background: -moz-linear-gradient(top, #4e7d0e, #7db72f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f'); } /* pink */ .pink { color: #feeef5; border: solid 1px #d2729e; background: #f895c2; background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)); background: -moz-linear-gradient(top, #feb1d3, #f171ab); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab'); } .pink:hover { background: #d57ea5; background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)); background: -moz-linear-gradient(top, #f4aacb, #e86ca4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4'); } .pink:active { color: #f3c3d9; background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)); background: -moz-linear-gradient(top, #f171ab, #feb1d3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3'); }