这一节主要说一下Menu对键盘的支持，本来不支持键盘这个菜单也完全可用了，不过还是为了和WinForm的Menu统一，所以支持了和WinForm菜单一样的操作方式。
菜单的处理函数Menu.prototype.Keydown是在AttachEvents()方法里通过：
doc.attachEvent('onkeydown',
this.Keydown);
来attach的，为什么要使用onkeydown不用onkeypress呢？是为了让菜单通过键盘快捷键来弹出子菜单时和WinForm方式菜单一样。这个doc是该菜单的popup窗口的doucment对象。
下面一边看代码一边讲吧：
if ( !evt || !evt.srcElement )
{
return;
}
var menuBody = evt.srcElement;
var menuHtml = FindChildElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
menuHtml = FindParentElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
return;
}
}
var menuObj = __MenuCache__[menuHtml.uniqueId];
if ( menuObj.HasSubMenuExpanded() )
{
return;
}
由于onkeydown事件处理函数attach在document上，所以要得到菜单必须寻找body里面的Table element，不过这个evt.srcElement可能是body，也可能是table的里的元素，关键是看当时菜单popup里的焦点在那个element上。上面代码的最后4句话是判断响应onkeydown事件的菜单是否有子菜单expanded，因为我们只让最后一级显示的子菜单处理keystroke，父级的必须忽略，否则就乱套了。
if ( menuObj.m_ShowTimer )
{
window.clearTimeout(menuObj.m_ShowTimer);
menuObj.m_ShowTimer =
null;
}
这是用来支持子菜单显示特效的一个timer，如果手动显示子菜单(包括鼠标click和键盘快捷键)，清除这个timer。
var activeIndex = -1;
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
if ( menuObj.m_ActiveItem == menuObj.m_Items[i] )
{
activeIndex = i;
break;
}
}
把菜单中已active的item的index搜索出来，没有active的menuitem，index为-1。
var sign = -1;
switch( evt.keyCode )
{
case 37 :
//
left
{
if ( menuObj.m_ParentMenu )
{
menuObj.Hide();
}
break;
}
case 38 :
//
up | no break;
{
sign = 1;
if ( activeIndex == -1 )
{
activeIndex = 0;
}
}
case 40 :
//
down
{
var itemCount = menuObj.m_Items.length;
for (
var i=1 ; i <= itemCount ; ++i )
{
var index = (itemCount+activeIndex-i*sign)%itemCount;
var item = menuObj.m_Items[index];
if ( !item.m_Disabled && item.m_Text != '-' )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = item;
menuObj.__activeItem();
break;
}
}
break;
}
case 39 :
//
right | no break;
{
var activeItem = menuObj.m_ActiveItem;
if ( !activeItem || !activeItem.m_ChildMenu )
{
break;
}
}
case 13 :
//
enter
{
menuObj.Click();
break;
}
case 27 :
{
break;
}
}
处理left, right, up, down四个键，up和down要麻烦些，因为要查找可用的(separator item和disabled item是不可用的，不能被active)下一个itme来active，到了最有一条itme再同方向up或down还需要有轮转的效果。
HACK: 由于up和down的代码完全相同，只是搜索方向不同，所以用了一个sign(取值1|-1)标志来判断搜索方向。
if ( evt.keyCode >= 48 && evt.keyCode <= 90 )
{
var keyList = '';
var key = String.fromCharCode(evt.keyCode);
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
var item = menuObj.m_Items[i];
if ( !item.m_Disabled && item.m_Mnemonic )
{
keyList += item.m_Mnemonic;
}
else
{
keyList += '-';
}
}
var index = keyList.indexOf(key);
if ( index != -1 )
{
if ( keyList.indexOf(key) == keyList.lastIndexOf(key) )
{
if ( !menuObj.m_Items[index].m_Disabled )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = menuObj.m_Items[index];
menuObj.__activeItem();
menuObj.Click();
}
}
else
{
menuObj.__resumeItem();
var newActive;
if ( !evt.shiftKey )
{
newActive = keyList.indexOf(key, activeIndex+1);
}
else
{
if ( activeIndex == 0 )
{
newActive = -1;
index = keyList.lastIndexOf(key);
}
else
{
newActive = keyList.lastIndexOf(key, activeIndex-1);
}
}
if ( newActive == -1 )
{
menuObj.m_ActiveItem = menuObj.m_Items[index];
}
else
{
menuObj.m_ActiveItem = menuObj.m_Items[newActive];
}
menuObj.__activeItem();
}
}
}
处理菜单条目上的快捷键Mnemonic，这里的算法是这样的，把该菜单上的每个item上的Mnemonic字符取出组成一个字符串，没有Mnemonic就用'-'代替。比如下面的菜单的Mnemonic字符组成的字符串分别是:
第一级："--N---"，第二级："M"，第三级："TTTT"。然后使用String.indexOf(key)就取到被按快捷键的MenuItem的index了，由于没有限制同一个Menu里面多个MenuItem具有相同的Mnemonic，所以像第三级菜单，一直按T键的效果就和按down key一样，它的效果使用语句Sting.indexOf(key, activeIndex+1)来获得。
#region 附Menu.prototype.Keydown = function(evt)代码
Menu.prototype.Keydown =
function(evt)
{
if ( !evt || !evt.srcElement )
{
return;
}
var menuBody = evt.srcElement;
var menuHtml = FindChildElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
menuHtml = FindParentElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
return;
}
}
var menuObj = __MenuCache__[menuHtml.uniqueId];
if ( menuObj.HasSubMenuExpanded() )
{
return;
}
if ( menuObj.m_ShowTimer )
{
window.clearTimeout(menuObj.m_ShowTimer);
menuObj.m_ShowTimer =
null;
}
var activeIndex = -1;
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
if ( menuObj.m_ActiveItem == menuObj.m_Items[i] )
{
activeIndex = i;
break;
}
}
var sign = -1;
switch( evt.keyCode )
{
case 37 :
//
left
{
if ( menuObj.m_ParentMenu )
{
menuObj.Hide();
}
break;
}
case 38 :
//
up | no break;
{
sign = 1;
if ( activeIndex == -1 )
{
activeIndex = 0;
}
}
case 40 :
//
down
{
var itemCount = menuObj.m_Items.length;
for (
var i=1 ; i <= itemCount ; ++i )
{
var index = (itemCount+activeIndex-i*sign)%itemCount;
var item = menuObj.m_Items[index];
if ( !item.m_Disabled && item.m_Text != '-' )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = item;
menuObj.__activeItem();
break;
}
}
break;
}
case 39 :
//
right | no break;
{
var activeItem = menuObj.m_ActiveItem;
if ( !activeItem || !activeItem.m_ChildMenu )
{
break;
}
}
case 13 :
//
enter
{
menuObj.Click();
break;
}
case 27 :
{
break;
}
}
if ( evt.keyCode >= 48 && evt.keyCode <= 90 )
{
var keyList = '';
var key = String.fromCharCode(evt.keyCode);
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
var item = menuObj.m_Items[i];
if ( !item.m_Disabled && item.m_Mnemonic )
{
keyList += item.m_Mnemonic;
}
else
{
keyList += '-';
}
}
var index = keyList.indexOf(key);
if ( index != -1 )
{
if ( keyList.indexOf(key) == keyList.lastIndexOf(key) )
{
if ( !menuObj.m_Items[index].m_Disabled )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = menuObj.m_Items[index];
menuObj.__activeItem();
menuObj.Click();
}
}
else
{
menuObj.__resumeItem();
var newActive;
if ( !evt.shiftKey )
{
newActive = keyList.indexOf(key, activeIndex+1);
}
else
{
if ( activeIndex == 0 )
{
newActive = -1;
index = keyList.lastIndexOf(key);
}
else
{
newActive = keyList.lastIndexOf(key, activeIndex-1);
}
}
if ( newActive == -1 )
{
menuObj.m_ActiveItem = menuObj.m_Items[index];
}
else
{
menuObj.m_ActiveItem = menuObj.m_Items[newActive];
}
menuObj.__activeItem();
}
}
}
if ( evt.keyCode != 27 )
{
evt.returnValue =
null;
evt.cancelBubble =
true;
}
};
to be continued ...
菜单的处理函数Menu.prototype.Keydown是在AttachEvents()方法里通过：
doc.attachEvent('onkeydown',
this.Keydown);
下面一边看代码一边讲吧：
if ( !evt || !evt.srcElement )
{
return;
}
var menuBody = evt.srcElement;
var menuHtml = FindChildElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
menuHtml = FindParentElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
return;
}
}
var menuObj = __MenuCache__[menuHtml.uniqueId];
if ( menuObj.HasSubMenuExpanded() )
{
return;
}
if ( menuObj.m_ShowTimer )
{
window.clearTimeout(menuObj.m_ShowTimer);
menuObj.m_ShowTimer =
null;
}
var activeIndex = -1;
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
if ( menuObj.m_ActiveItem == menuObj.m_Items[i] )
{
activeIndex = i;
break;
}
}
var sign = -1;
switch( evt.keyCode )
{
case 37 :
//
left
{
if ( menuObj.m_ParentMenu )
{
menuObj.Hide();
}
break;
}
case 38 :
//
up | no break;
{
sign = 1;
if ( activeIndex == -1 )
{
activeIndex = 0;
}
}
case 40 :
//
down
{
var itemCount = menuObj.m_Items.length;
for (
var i=1 ; i <= itemCount ; ++i )
{
var index = (itemCount+activeIndex-i*sign)%itemCount;
var item = menuObj.m_Items[index];
if ( !item.m_Disabled && item.m_Text != '-' )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = item;
menuObj.__activeItem();
break;
}
}
break;
}
case 39 :
//
right | no break;
{
var activeItem = menuObj.m_ActiveItem;
if ( !activeItem || !activeItem.m_ChildMenu )
{
break;
}
}
case 13 :
//
enter
{
menuObj.Click();
break;
}
case 27 :
{
break;
}
}
HACK: 由于up和down的代码完全相同，只是搜索方向不同，所以用了一个sign(取值1|-1)标志来判断搜索方向。
if ( evt.keyCode >= 48 && evt.keyCode <= 90 )
{
var keyList = '';
var key = String.fromCharCode(evt.keyCode);
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
var item = menuObj.m_Items[i];
if ( !item.m_Disabled && item.m_Mnemonic )
{
keyList += item.m_Mnemonic;
}
else
{
keyList += '-';
}
}
var index = keyList.indexOf(key);
if ( index != -1 )
{
if ( keyList.indexOf(key) == keyList.lastIndexOf(key) )
{
if ( !menuObj.m_Items[index].m_Disabled )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = menuObj.m_Items[index];
menuObj.__activeItem();
menuObj.Click();
}
}
else
{
menuObj.__resumeItem();
var newActive;
if ( !evt.shiftKey )
{
newActive = keyList.indexOf(key, activeIndex+1);
}
else
{
if ( activeIndex == 0 )
{
newActive = -1;
index = keyList.lastIndexOf(key);
}
else
{
newActive = keyList.lastIndexOf(key, activeIndex-1);
}
}
if ( newActive == -1 )
{
menuObj.m_ActiveItem = menuObj.m_Items[index];
}
else
{
menuObj.m_ActiveItem = menuObj.m_Items[newActive];
}
menuObj.__activeItem();
}
}
}
第一级："--N---"，第二级："M"，第三级："TTTT"。然后使用String.indexOf(key)就取到被按快捷键的MenuItem的index了，由于没有限制同一个Menu里面多个MenuItem具有相同的Mnemonic，所以像第三级菜单，一直按T键的效果就和按down key一样，它的效果使用语句Sting.indexOf(key, activeIndex+1)来获得。
#region 附Menu.prototype.Keydown = function(evt)代码
Menu.prototype.Keydown =
function(evt)
{
if ( !evt || !evt.srcElement )
{
return;
}
var menuBody = evt.srcElement;
var menuHtml = FindChildElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
menuHtml = FindParentElement(menuBody, 'TABLE');
if ( !menuHtml || !menuHtml.uniqueId )
{
return;
}
}
var menuObj = __MenuCache__[menuHtml.uniqueId];
if ( menuObj.HasSubMenuExpanded() )
{
return;
}
if ( menuObj.m_ShowTimer )
{
window.clearTimeout(menuObj.m_ShowTimer);
menuObj.m_ShowTimer =
null;
}
var activeIndex = -1;
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
if ( menuObj.m_ActiveItem == menuObj.m_Items[i] )
{
activeIndex = i;
break;
}
}
var sign = -1;
switch( evt.keyCode )
{
case 37 :
//
left
{
if ( menuObj.m_ParentMenu )
{
menuObj.Hide();
}
break;
}
case 38 :
//
up | no break;
{
sign = 1;
if ( activeIndex == -1 )
{
activeIndex = 0;
}
}
case 40 :
//
down
{
var itemCount = menuObj.m_Items.length;
for (
var i=1 ; i <= itemCount ; ++i )
{
var index = (itemCount+activeIndex-i*sign)%itemCount;
var item = menuObj.m_Items[index];
if ( !item.m_Disabled && item.m_Text != '-' )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = item;
menuObj.__activeItem();
break;
}
}
break;
}
case 39 :
//
right | no break;
{
var activeItem = menuObj.m_ActiveItem;
if ( !activeItem || !activeItem.m_ChildMenu )
{
break;
}
}
case 13 :
//
enter
{
menuObj.Click();
break;
}
case 27 :
{
break;
}
}
if ( evt.keyCode >= 48 && evt.keyCode <= 90 )
{
var keyList = '';
var key = String.fromCharCode(evt.keyCode);
for (
var i=0 ; i < menuObj.m_Items.length ; ++i )
{
var item = menuObj.m_Items[i];
if ( !item.m_Disabled && item.m_Mnemonic )
{
keyList += item.m_Mnemonic;
}
else
{
keyList += '-';
}
}
var index = keyList.indexOf(key);
if ( index != -1 )
{
if ( keyList.indexOf(key) == keyList.lastIndexOf(key) )
{
if ( !menuObj.m_Items[index].m_Disabled )
{
menuObj.__resumeItem();
menuObj.m_ActiveItem = menuObj.m_Items[index];
menuObj.__activeItem();
menuObj.Click();
}
}
else
{
menuObj.__resumeItem();
var newActive;
if ( !evt.shiftKey )
{
newActive = keyList.indexOf(key, activeIndex+1);
}
else
{
if ( activeIndex == 0 )
{
newActive = -1;
index = keyList.lastIndexOf(key);
}
else
{
newActive = keyList.lastIndexOf(key, activeIndex-1);
}
}
if ( newActive == -1 )
{
menuObj.m_ActiveItem = menuObj.m_Items[index];
}
else
{
menuObj.m_ActiveItem = menuObj.m_Items[newActive];
}
menuObj.__activeItem();
}
}
}
if ( evt.keyCode != 27 )
{
evt.returnValue =
null;
evt.cancelBubble =
true;
}
};
to be continued ...
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
