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

    这一节主要说一下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)来获得。 

附Menu.prototype.Keydown = function(evt)代码

    to be continued ...

posted on 2004-12-21 00:49  birdshome  阅读(...)  评论(...编辑  收藏

导航