Skip to content

Instantly share code, notes, and snippets.

@benbai123

benbai123/gist:5704968

Last active December 18, 2015 01:39
Show Gist options
  • Save benbai123/5704968 to your computer and use it in GitHub Desktop.
Save benbai123/5704968 to your computer and use it in GitHub Desktop.
Download ZIP
ZK Menupopup support auto resize and scroll with keystroke
Raw
gistfile1.txt
<zk xmlns:w="client">
<script><![CDATA[
zk.afterLoad("zul.menu", function () {
var _mppWgt = {};
zk.override(zul.menu.Menupopup.prototype, _mppWgt, {
bind_: function (a, b, c) {
_mppWgt.bind_.apply(this, arguments);
var $n = jq(this.$n());
if ($n.hasClass('z-auto-resize-menupopup')) {
$n.css({
// a small initial height
// so we do not need to handle too much things
'height': '30px',
'overflow': 'auto'
});
}
},
_getMenu: function () {
var p = this.parent;
return p.$instanceof(zul.menu.Menu) ? p: null;
},
open: function (ref, offset, position, opts) {
_mppWgt.open.apply(this, arguments);
var $n = jq(this.$n());
if ($n.hasClass('z-auto-resize-menupopup')) {
var menu = this._getMenu();
if (menu) {
var $menuN = jq(menu.$n()),
start = $menuN.offset().top + (menu.isTopmost()? 30 : 10),
height = document.body.clientHeight,
cheight = jq(this.$n('cave')).height();
height -= start;
if (height < 0)
height = 0;
if (height > cheight)
height = cheight;
jq(this.$n()).css({
'overflow': 'auto',
'height': height + 'px'
});
}
}
},
close: function () {
_mppWgt.close.apply(this, arguments);
var $n = jq(this.$n());
if ($n.hasClass('z-auto-resize-menupopup')) {
$n.css({
// back to small height while close
'height': '30px'
});
}
},
doKeyDown_: function (evt) {
_mppWgt.doKeyDown_.apply(this, arguments);
var n = this.$n(),
$n = jq(n),
item = $n.find('.z-menu-over')[0] || $n.find('.z-menuitem-over')[0];
if (item) {
var height = $n.height();
// do if has spaces
if (height) {
var $item = jq(item),
start = $n.offset().top,
bottom = start + height,
itop = $item.offset().top,
bottom = bottom - $item.height();
if (itop <= start) {
n.scrollTop -= start-itop;
} else if (itop >= bottom) {
n.scrollTop += (bottom < start? (start-itop) : (itop-bottom))
}
}
}
}
});
});
]]></script>
<menubar hflex="min" autodrop="true">
<menu label="test menu">
<menupopup sclass="z-auto-resize-menupopup">
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menu label="test menu">
<menupopup sclass="z-auto-resize-menupopup">
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menu label="test menu">
<menupopup sclass="z-auto-resize-menupopup">
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
</menupopup>
</menu>
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
</menupopup>
</menu>
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
</menupopup>
</menu>
<menu label="test menu">
<menupopup sclass="z-auto-resize-menupopup">
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
<menuitem label="test menuitem" />
</menupopup>
</menu>
</menubar>
</zk>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment