使用Popup視窗建立無限級Web頁菜單(8)

  最後總結一下示例中的一些小問題，沒有什麼太重要的東西，主要都是為了UI上更好看些。

    顯示特效的支援，使用style的filter來實作的，代碼：

#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 )

    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')";

        case 'RevealTrans' :

            filterString += "RevealTrans(duration='0.5',transition='12')";

        case 'Fade' :

            filterString += 'Fade()';

        default :

            filterString = '';        // no effect

    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太長時使用...截斷顯示，代碼如下：

#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頁菜單還有疑問，或者有什麼建議歡迎提出來讨論

。

本文轉自部落格園鳥食軒的部落格，原文連結：http://www.cnblogs.com/birdshome/，如需轉載請自行聯系原部落客。