使用Popup窗口创建无限级Web页菜单(5)

    代码框架在(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
      

生成的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(0011);
    
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 ...

posted on 2004-12-17 01:05  birdshome  阅读(...)  评论(...编辑  收藏

导航