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 :

Stepbar test

3JamesChu172.69.33.251ehknsvMay 10, 2024 3:10:02 AMlink

Stepbar test

2JamesChu172.70.210.1751ehknsvMay 10, 2024 2:52:27 AMlink

Stepbar test

1JamesChu172.70.210.1751ehknsvMay 10, 2024 2:52:12 AMlink

Focused listitem highlight in CSS

3guest162.158.186.892f9to3gMay 9, 2024 9:06:32 AMlink

Use zAu.send to send data to server from client

411guest162.158.186.661hisp5kMay 9, 2024 2:37:53 AMlink

Another new ZK fiddle

7guest172.71.81.443gm6qr1May 8, 2024 4:07:58 PMlink

Another new ZK fiddle

6guest172.71.81.433gm6qr1May 8, 2024 4:06:19 PMlink

Another new ZK fiddle

5guest172.71.81.433gm6qr1May 8, 2024 4:05:04 PMlink

Another new ZK fiddle

4guest172.71.81.443gm6qr1May 8, 2024 4:04:19 PMlink

Another new ZK fiddle

3guest172.71.81.443gm6qr1May 8, 2024 4:03:46 PMlink

Listbox auto scroll while dragging

2benbai61.224.43.1931c267mkJan 24, 2012 12:35:17 AMlink

resources

index.zulzul<zk> <script type="text/javascript"><![CDATA[ var oldUpdateDrag = zk.Draggable.prototype._updateDrag; zk.afterLoad("zk", function () { zk.Draggable.prototype._updateDrag = function (pt, evt) { // call original _updateDrag method oldUpdateDrag.apply(this, arguments); var node = this.node; // cloned listitem, the drag node if (this.control.$instanceof(zul.sel.Listitem)) { // get original listbox var $node = jq(node), listbox = getEffectListbox($node), dir; // start scroll if has a direction, // or clear the scroll timer if (dir = shouldScroll($node, jq(listbox))) startScroll(dir, listbox); else clearScroll(listbox); } } }); // return the scroll direction if have to scroll, // return null otherwise. function shouldScroll ($node, $listbox) { var top = $listbox.offset().top, itemTop = $node.offset().top; if (itemTop < top) return 'up'; else { var bottom = top + $listbox.height(), itemBottom = itemTop + $node.height(); return itemBottom > bottom? 'down' : null; } } // create scroll timer with the specified direction function startScroll (dir, listbox) { if (!listbox._scrollStarted) listbox._scrollStarted = setInterval(function () { var body = listbox.$n('body'), oldValue = body.scrollTop; body.scrollTop += dir == 'down'? 20 : (-20); // can not scroll any more if (body.scrollTop == oldValue) clearScroll(listbox); }, 50); } // clear scroll timer function clearScroll(listbox) { if (listbox._scrollStarted) { clearInterval(listbox._scrollStarted); listbox._scrollStarted = null; } } function getEffectListbox($node) { var left = $node.offset().left, $lbOne = jq('$lbOne'); // get root element of listbox by assigned ID if (left < $lbOne.offset().left + $lbOne.width()) { // get the zk widgeth by its root element // clear the scroll of another listbox first clearScroll(zk.Widget.$(jq('$lbTwo')[0])); return zk.Widget.$($lbOne[0]); } clearScroll(zk.Widget.$(jq('$lbOne')[0])); return zk.Widget.$(jq('$lbTwo')[0]); } ]]></script> <div height="15px" /> <hbox> <listbox id="lbOne" height="120px" width="200px" droppable="true"> <listitem draggable="true" droppable="true"> <listcell label="Item 1" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 2" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 3" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 4" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 5" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 6" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 7" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 8" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 9" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 10" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 11" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 12" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 13" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 14" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 15" /> </listitem> </listbox> <listbox id="lbTwo" height="120px" width="200px" droppable="true"> <listitem draggable="true" droppable="true"> <listcell label="Item 1" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 2" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 3" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 4" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 5" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 6" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 7" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 8" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 9" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 10" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 11" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 12" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 13" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 14" /> </listitem> <listitem draggable="true" droppable="true"> <listcell label="Item 15" /> </listitem> </listbox> </hbox> </zk>