這一節(jié)主要說(shuō)一下Menu對(duì)鍵盤(pán)的支持，本來(lái)不支持鍵盤(pán)這個(gè)菜單也完全可用了，不過(guò)還是為了和WinForm的Menu統(tǒng)一，所以支持了和WinForm菜單一樣的操作方式。

????菜單的處理函數(shù)Menu.prototype.Keydown是在AttachEvents()方法里通過(guò)：
doc.attachEvent('onkeydown',?this.Keydown); 來(lái)attach的，為什么要使用onkeydown不用onkeypress呢？是為了讓菜單通過(guò)鍵盤(pán)快捷鍵來(lái)彈出子菜單時(shí)和WinForm方式菜單一樣。這個(gè)doc是該菜單的popup窗口的doucment對(duì)象。

??? 下面一邊看代碼一邊講吧：
????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事件處理函數(shù)attach在document上，所以要得到菜單必須尋找body里面的Table element，不過(guò)這個(gè)evt.srcElement可能是body，也可能是table的里的元素，關(guān)鍵是看當(dāng)時(shí)菜單popup里的焦點(diǎn)在那個(gè)element上。上面代碼的最后4句話是判斷響應(yīng)onkeydown事件的菜單是否有子菜單expanded，因?yàn)槲覀冎蛔屪詈笠患?jí)顯示的子菜單處理keystroke，父級(jí)的必須忽略，否則就亂套了。
????if?(?menuObj.m_ShowTimer?)
????{
????????window.clearTimeout(menuObj.m_ShowTimer);
????????menuObj.m_ShowTimer?=?null;
????} ??? 這是用來(lái)支持子菜單顯示特效的一個(gè)timer，如果手動(dòng)顯示子菜單(包括鼠標(biāo)click和鍵盤(pán)快捷鍵)，清除這個(gè)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;
????????}
????} ??? 把菜單中已a(bǔ)ctive的item的index搜索出來(lái)，沒(méi)有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四個(gè)鍵，up和down要麻煩些，因?yàn)橐檎铱捎玫?separator item和disabled item是不可用的，不能被active)下一個(gè)itme來(lái)active，到了最有一條itme再同方向up或down還需要有輪轉(zhuǎn)的效果。
??? HACK: 由于up和down的代碼完全相同，只是搜索方向不同，所以用了一個(gè)sign(取值1|-1)標(biāo)志來(lái)判斷搜索方向。

????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，這里的算法是這樣的，把該菜單上的每個(gè)item上的Mnemonic字符取出組成一個(gè)字符串，沒(méi)有Mnemonic就用'-'代替。比如下面的菜單的Mnemonic字符組成的字符串分別是:
?? ?
??? 第一級(jí)："--N---"，第二級(jí)："M"，第三級(jí)："TTTT"。然后使用String.indexOf(key)就取到被按快捷鍵的MenuItem的index了，由于沒(méi)有限制同一個(gè)Menu里面多個(gè)MenuItem具有相同的Mnemonic，所以像第三級(jí)菜單，一直按T鍵的效果就和按down key一樣，它的效果使用語(yǔ)句Sting.indexOf(key,?activeIndex+1)來(lái)獲得。?

附Menu.prototype.Keydown?=?function(evt)代碼#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 ...

轉(zhuǎn)載于:https://www.cnblogs.com/birdshome/archive/2004/12/21/79822.html

總結(jié)

以上是生活随笔為你收集整理的使用Popup窗口创建无限级Web页菜单(7)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。