代碼框架在(4)里面已經全部列出來了，現在工作就是按流程把他們完成。本來實現一個prototype的Menu菜單類只需要最多300行代碼，可是后來做了一些操作習慣支持和UI顯示上的優化后，代碼猛增到了1000多行。不過final版本看起來確實比土不拉嘰的prototype強很多哦。

??? 為了比較直觀的說明代碼的作用，我就從菜單的顯示開始說。要顯示一個菜單顯必須構建一個菜單的實例，實例構建的完整代碼如下：
<div?oncontextmenu="return?ShowContextMenu(this);"?style="width:?200;?height:?200;?border:?solid?1px?blue;">
????<table?width="100%"?height="100%"?border="0">
?????????<tr>
?????????????<td?valign="middle"?align="center">
??????????????????right?click?me
?????????????</td>
?????????</tr>
????</table>
</div> <script?language="javascript">
function?ShowContextMenu(elmt)
{
????if?(?!elmt.contextMenu?)
????{
?????????elmt.contextMenu?=?CreateContextMenu();
????}
????var?win?=?window;?
????elmt.contextMenu.Show(win);
????return?false;?
}
CreateMenu#region?CreateMenu
function?CreateContextMenu()
{
????var?menu?=?new?Menu();
????for?(?var?i=1?;?i?<?6?;?i++?)
????{
?????????var?mi?=?new?MenuItem('Menu?Item?1-'?+?i,?Alert);
?????????menu.Add(mi);
????}
????var?submenu?=?new?Menu();
????for?(?var?i=1?;?i?<?5?;?i++?)
????{
?????????var?mi?=?new?MenuItem('Menu?I&tem?3-'?+?i,?Alert);
?????????submenu.Add(mi);?
????}
????var?submenu2?=?new?Menu();
????submenu2.Add(new?MenuItem('&Menu?Item?2-1',?null,?null,?null,?submenu));
????var?mi2?=?new?MenuItem('Me&nu?Item?1-6',?Alert,?'images/paste.small.png',?null,?submenu2);
????menu.AddAt(mi2,?2);
????return?menu;
}
#endregion
</script>

??????

生成的Context Menu效果

??? 這是完全手工添加菜單條目生成的一個Context Menu，最后會完成一個自動解析菜單數據來生成菜單的方法。

??? 我們現在來看這個Menu.prototype.Show(win)方法，這是菜單的第一級顯示時的方法，它是由用戶來調用的，因為菜單需要定位于用戶給定位置(ContextMenu的用戶給定位置就是鼠標點擊的位置)。在菜單顯示出第一級后，后續的子菜單的顯示，都是在Menu類內部來處理的，子菜單位置是相對于parent menu，后續邏輯就都封裝在Menu類內部了。Show()方法代碼如下：
Menu.prototype.Show?=?function(win)
{
????if?(?!win?)
????{
????????return;
????}
????var?menuObj?=?this;
????menuObj.m_Opener?=?win;
????menuObj.__resumeItem();
????var?win?=?menuObj.m_Opener;
????var?popup,?popwin,?popdoc;
????//?判斷菜單的容器popup是否建立
????if?(?!menuObj.m_Popup?)
????{
????????popup?=?win.createPopup();
????????popup.document.body.bgColor?=?'windowtext';
????????popup.document.body.style.backgroundColor?=?'window';
????????menuObj.m_Popup?=?popup;
????}
????else
????{
????????popup?=?menuObj.m_Popup;
????????menuObj.__resumeAll();
????}
????popdoc?=?popup.document;
????popwin?=?popdoc.parentWindow;
????//?判斷是否需要重繪菜單的內容
????if?(?menuObj.m_Invalidate?||?!menuObj.m_Drawn?)
????{
????????popdoc.body.innerHTML?=?menuObj.Render().outerHTML;
????????//?popdoc.body.appendChild(menuObj.Render());
????????menuObj.m_Invalidate?=?false;
????????menuObj.m_Drawn?=?true;
????}
????//?獲取菜單的主table(菜單是使用table來實現的)
????var?menuHtml?=?popup.document.getElementById('menu');
????//?這個show只是為了測量菜單的bounds而調用的
????popup.show(0,?0,?1,?1);
????var?w?=?popdoc.body.scrollWidth;?
????? //?判斷菜單條目的Text的顯示寬度是否在許可范圍內，
????? // 如果超出許可范圍則ellipsis處理并返回新的MenuItem的width
????w?=?this.__isEllipsis(this,?menuHtml);
????var?h?=?popdoc.body.scrollHeight;
????var?x?=?win.event.clientX?+?win.screenLeft;
????var?y?=?win.event.clientY?+?win.screenTop;
????popup.show(x,?y,?w,?h);?
????? // 菜單的顯示特效，使用filter實現的
????this.FadeinEffect(Menu.Attributes.ShowMenuEffect);
????menuObj.m_Bounds?=?
????{
????????top:?x,?left:?y,
????????width:?menuHtml.offsetWidth,
????????height:?menuHtml.offsetHeight
????};?
??????//?把菜單操作的事件attach到菜單上，鼠標和鍵盤操作等
????menuObj.AttachEvents(menuHtml);
}; ??? 上面注解應該都比較清楚了，只是這個popup.show(0, 0, 1, 1);比較有意思哈，當我們向popup里添加好了菜單的HTML元素后，我們發現在popup沒有顯示過之前，是根本取不到構成Menu UI的那個Table element的bounds信息的。這里show上一下后，就是為了讓IE算出其bounds信息，然后再使用實際的bounds信息show菜單。這算一個小hack吧，也是這個Menu中比較有效率的地方，因為除了這個show(0, 0, 1,1)就在沒有計算菜單bounds的地方了，當然也用不著了。然而為什么又沒有把bounds計算也做成lazy load象popup的生成那樣呢？是因為用戶可能在菜單顯示后修改IE的字體大小(比如按住Ctrl再滾動鼠標滾輪)，這樣保證了再次顯示菜單時能修正菜單的實際bounds。而后面把menu的bounds存了起來是為了在顯示子菜單時，方便判斷其默認向右展開空間是否足夠，如果不夠寬則從parent menu左側展開。?

????to be continued ...

轉載于:https://www.cnblogs.com/birdshome/archive/2004/12/17/78200.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。