使用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  阅读(3290)  评论(3)  编辑  收藏  举报

导航