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 AMlink#15373
1guest172.70.210.2092fiqkgjSep 19, 2022 1:45:29 AMlinkresources
index.zulzul<zk xmlns:h="native">
<h:pre>
Steps to reproduce:
1. scroll down to hover on the last menu, wait for the menupopup shows
2. move the mouse up one item to "c10"
Current result:
the scroll bar goes back to the top position
Expected result:
the scroll bar keep the current position, doesn't move.
</h:pre>
<menubar>
<menu label="long menu">
<menupopup>
<apply template="menuitems" name="a"/>
<menu label="my menu">
<menupopup>
<menuitem label="my menu"/>
</menupopup>
</menu>
<apply template="menuitems" name="b"/>
<apply template="menuitems" name="c"/>
<menu label="last1">
<menupopup>
<menuitem label="menu"/>
</menupopup>
</menu>
<menu label="last2">
<menupopup>
<menuitem label="menu"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
<script src="t15373.js"/>
1. .z-menuitem-content:hover produces the highlight box for mouse hovering a menu item.
<template name="menuitems" >
<forEach begin="1" end="10">
<menuitem label="${(name+=each)}"/>
</forEach>
<menuseparator/>
</template>
</zk>t15373.jsjavascript/*
Purpose:
1. fix ZK-5025 avoid 2 active items
2. fix ZK-5026 when opening a menupopup and closing it, the focus is not back to the menupopup.
so pressing arrow keys can't move the active menuitem.
3. fix ZK-5235 after closing a menupopup, the scroll bar doesn't scroll up.
Based on version: 8.6.4.1
update: 2022-09-08
*/
zk.afterLoad('zul.menu', function() {
var exMenu= {};
function _toggleClickableCSS(wgt, remove) {
if (wgt.isListen('onClick')) {
jq(wgt.$n())[remove ? 'removeClass' : 'addClass'](wgt.$s('hover'));
}
}
zk.override(zul.menu.Menu.prototype, exMenu, {
_doMouseEnter: function (evt) {
var menubar = this.getMenubar();
if (menubar) {
menubar._noFloatUp = false;
}
if (this._disabled) return;
var topmost = this.isTopmost();
if (topmost)
_toggleClickableCSS(this);
if (topmost && zk.ie < 11 && !jq.isAncestor(this.getAnchor_(), evt.domTarget))
return; // don't activate
if (this.menupopup)
this.menupopup._shallClose = false;
if (!topmost) {
zWatch.fire('onFloatUp', this); //notify all
if (this.menupopup && !this.menupopup.isOpen()) this.menupopup.open();
this.parent.removeActive_(); //remove the previous active item
} else {
if (this.menupopup && menubar._autodrop) {
zWatch.fire('onFloatUp', this); //notify all
if (!this.menupopup.isOpen()) this.menupopup.open();
} else {
var target = menubar._lastTarget;
if (target && target != this && target.menupopup
&& target.menupopup.isVisible()) {
target.menupopup.close({sendOnOpen: true});
this.$class._rmActive(target);
if (this.menupopup) this.menupopup.open();
}
}
}
this.$class._addActive(this);
},
});
function _indexOfVisibleMenu(popup, child) {
var i = -1,
$menubar = zul.menu.Menubar;
for (var c = popup.firstChild; c; c = c.nextSibling) {
// check active first (child may be inactive)
if ($menubar._isActiveItem(c)) {
i++;
}
if (c == child) return i;
}
return i;
}
var exMenupopup= {};
zk.override(zul.menu.Menupopup.prototype, exMenupopup, {
// return focus element
getAnchor_: function getAnchor_() {
return this.$n('a');
},
//focus on its anchor
addActive_: function addActive_(wgt) {
this.syncFocusPosition(wgt);
// ZK-5026
if (zk.currentFocus != this) {
var anc = this.getAnchor_();
if (anc) {
anc.focus();
}
}
this._curIndex = _indexOfVisibleMenu(this, wgt); //current active menu/menuitem
},
removeActive_: function removeActive_() {
var currentActive = this._currentChild();
if (currentActive) {
currentActive.$class._rmActive(currentActive);
this._curIndex = -1;
}
},
_currentChild: function _currentChild() {
var index = this._curIndex,
$menubar = zul.menu.Menubar;
if (index >= 0) {
for (var w = this.firstChild, k = 0; w; w = w.nextSibling) {
if ($menubar._isActiveItem(w) && k++ == index) return w;
}
}
return null;
},
/* move focus anchor to the current hovered menuitem.
If focus anchor is always on the top of the menupopup, when focusing on the anchor, it will move the scrollbar to the top */
syncFocusPosition: function(menuitem){
this.getAnchor_().style.top = menuitem.$n().offsetTop + "px";
this.getAnchor_().style.left = menuitem.$n().offsetLeft + "px";
}
});
var exMenuitem= {};
zk.override(zul.menu.Menuitem.prototype, exMenuitem, {
bind_: function () {
exMenuitem.bind_.apply(this, arguments);
this.domListen_(this.$n('a'), 'onMouseLeave');
},
unbind_: function () {
this.domUnlisten_(this.$n('a'), 'onMouseLeave');
},
/* when a mouse enter and leave, add and remove hover CSS class */
_doMouseEnter: function _doMouseEnter(evt) {
var isTopmost = this.isTopmost();
if (zul.menu._nOpen || isTopmost) zWatch.fire('onFloatUp', this); //notify all
if (!isTopmost && !this.isDisabled()) {
if (this.parent) this.parent.removeActive_();
this.$class._addActive(this); //change focus
}
},
_doMouseLeave: function _doMouseLeave(evt) {
var isTopmost = this.isTopmost();
if (!isTopmost && !this._disabled) {
this.$class._rmActive(this);
}
},
});
zul.menu.Menuitem._addActive = function(wgt) {
var top = wgt.isTopmost();
jq(wgt.$n()).addClass(wgt.$s('hover'));
if (!top) {
var parentMenupopup = wgt.parent;
if (parentMenupopup) {
parentMenupopup.addActive_(wgt);
}
if (parentMenupopup.parent.$instanceof(zul.menu.Menu)) {
this._addActive(parentMenupopup.parent);
}
}
};
zul.menu.Menubar._isActiveItem = function(wgt) {
return wgt.isVisible() && (wgt.$instanceof(zul.menu.Menu) || wgt.$instanceof(zul.menu.Menuitem)) && !wgt.isDisabled();
}
});
if(zk.version != '8.6.4.1'){
console.warn('This override script version compatibility was tested for ZK 8.6.4.1. If you are running a different version, please check this script compatibility.');
}