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

    最后总结一下示例中的一些小问题，没有什么太重要的东西，主要都是为了UI上更好看些。

    显示特效的支持，使用style的filter来实现的，代码：

Menu.prototype.FadeinEffect = function(effect)#region Menu.prototype.FadeinEffect = function(effect)

Menu.prototype.FadeinEffect = function(effect)
{
    if ( !this.m_Popup || !this.m_Popup.isOpen )
    {
        return;
    }
    var menuHtml = this.m_Popup.document.getElementById('menu');
    if ( !menuHtml )
    {
        return;
    }
    var filterString = 'progid:DXImageTransform.Microsoft.';
    switch(effect)
    {
        case 'GradientWipeLeft2Right' :
        {
            filterString += "GradientWipe(duration='0.5',gradientSize='0.75',motion='forward')";
            break;
        }
        case 'GradientWipeUp2Down' :
        {
            filterString += "GradientWipe(duration='0.5',gradientSize='0.25',motion='forward',wipeStyle='1')";
            break;
        }
        case 'RevealTrans' :
        {
            filterString += "RevealTrans(duration='0.5',transition='12')";
            break;
        }
        case 'Fade' :
        {
            filterString += 'Fade()';
            break;
        }
        default :
        {
            filterString = '';        // no effect
            break;
        }
    }
    if ( filterString )
    {
        menuHtml.style.visibility = 'hidden';
        menuHtml.style.filter = filterString;
        menuHtml.filters[0].apply();
        menuHtml.style.visibility = 'visible';
        menuHtml.filters[0].play(0.25);
    }
};
 #endregion

    菜单条目上Text太长时使用...截断显示，代码如下：

Menu.prototype.__isEllipsis = function(menuObj, menuHtml)#region Menu.prototype.__isEllipsis = function(menuObj, menuHtml)

Menu.prototype.__isEllipsis = function(menuObj, menuHtml)
{
    if ( menuHtml.offsetWidth > Menu.Attributes.MaxMenuItemTextWidth )
    {
        for ( var i=0 ; i < menuHtml.rows.length ; ++i )
        {
            var tr = menuHtml.rows(i);
            if ( !tr.type || tr.type != 'normal' )
            {
                continue;
            }
            var td = tr.cells(2);
            var span = td.childNodes[0];
            
            if ( span.scrollWidth > Menu.Attributes.MaxMenuItemTextWidth )
            {
                td.style.fontWeight = 'bold';
                var doc = menuObj.m_Popup.document;
                var tbl = doc.createElement('TABLE');
                tbl.border = 0;
                tbl.cellpadding = 0;
                tbl.cellspacing = 0;
                tbl.style.textOverflow = 'ellipsis';
                tbl.style.tableLayout = 'fixed';
                tbl.style.color = Menu.Attributes.NormalMenuForeColor;
                var tbody = doc.createElement('TBODY');
                tbl.appendChild(tbody);
                var tr = doc.createElement('TR');
                tbody.appendChild(tr);
                var td = doc.createElement('TD');
                tr.appendChild(td);
                td.innerHTML = span.innerHTML;
                menuHtml.rows(i).cells(2).innerHTML = '';
                menuHtml.rows(i).cells(2).appendChild(tbl);
                tbl.style.lineHeight = '85%';
                td.style.width = '100%';
                td.style.overflow = 'hidden';
                td.style.whiteSpace = 'nowrap';
                td.style.textOverflow = 'ellipsis';
                tbl.title = td.innerText;
            }
        }
        menuHtml.style.width = Menu.Attributes.MaxMenuItemTextWidth;
    }
    return menuHtml.offsetWidth;
};
  #endregion

    Menu.Attributes.MaxMenuItemTextWidth是预设的MenuItem上Text的最大宽度，如果超过这个宽度将使用一个table element把Text包装起来，然后使用CSS使其产生"..."效果。要用CSS的text-overflow:ellipsis产生"..."效果，这里有几个地方需要注意：必须用一个表格包起来，表格的CSS要设置table-layout为fixed；然后文字外的html element(本例中是td)的样式表必须设置为：overflow: hidden; white-space: nowrap; text-overflow: ellipsis;，缺一不行，当然如果有继承下来的css属性也可以。 

   

    菜单中文字被截断的效果

    比如要显示如下效果：

MenuItem 1234567890 1234567890 1234567890

    HTML代码为：

 <table style="table-layout: fixed;" width="200">
     <tr>
         <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
                 border: solid 1px red;">MenuItem 1234567890 1234567890 1234567890
         </td>
     </tr>
 </table>

    当我们的文字显示为"..."overflow样式后，我们还可以查询到这个状态，并给这样的条目添加tooltip。我们只用比较一下td元素的clientWidth和scrollWidth，如果不相等，也就是scrollWidth > clientWidth，就说明文本没有被显示全(当然出滚动条的时候这个比较也成立)。

    子菜单弹出时如果其右边的屏幕空间不够菜单的宽度，菜单将从父级菜单的左边弹出，使用下面的代码实现：

 subpop.show(0, 0, 1, 1);
 var menuHtml = subpop.document.getElementById('menu');
 var x, y, w, h;
 x = miHtml.offsetWidth-2;
 y = 0;
 w = menuHtml.offsetWidth;
 w = this.__isEllipsis(subMenuObj, menuHtml);
 h = menuHtml.offsetHeight;

 var availableScreenWidth = window.screen.width;
 var factWidth = popup.document.parentWindow.screenLeft + menuObj.m_Bounds.width + w;
 if ( factWidth > availableScreenWidth )
 {
     x = - w + 2;
 }    
 subpop.show(x, y, w, h, miHtml);
 subMenuObj.FadeinEffect(Menu.Attributes.ShowMenuEffect);

    前面说到到的FadeinEffect和__isEllipsis两个方法分别是在上面的位置被调用的。 

    如果对于popup制作无限级web页菜单还有疑问，或者有什么建议欢迎提出来讨论。

    The End.