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

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

    显示特效的支持,使用style的filter来实现的,代码:
Menu.prototype.FadeinEffect = function(effect)

    菜单条目上Text太长时使用...截断显示,代码如下:
Menu.prototype.__isEllipsis = function(menuObj, menuHtml)
    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(0011);
 
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.

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

导航