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

    显示特效的支持,使用style的filter来实现的,代码:
 Menu.prototype.FadeinEffect = function(effect)
使用Popup窗口创建无限级Web页菜单(8)Menu.prototype.FadeinEffect = function(effect)
使用Popup窗口创建无限级Web页菜单(8){
使用Popup窗口创建无限级Web页菜单(8)    
if ( !this.m_Popup || !this.m_Popup.isOpen )
使用Popup窗口创建无限级Web页菜单(8)    {
使用Popup窗口创建无限级Web页菜单(8)        
return;
使用Popup窗口创建无限级Web页菜单(8)    }
使用Popup窗口创建无限级Web页菜单(8)    
var menuHtml = this.m_Popup.document.getElementById('menu');
使用Popup窗口创建无限级Web页菜单(8)    
if ( !menuHtml )
使用Popup窗口创建无限级Web页菜单(8)    {
使用Popup窗口创建无限级Web页菜单(8)        
return;
使用Popup窗口创建无限级Web页菜单(8)    }
使用Popup窗口创建无限级Web页菜单(8)    
var filterString = 'progid:DXImageTransform.Microsoft.';
使用Popup窗口创建无限级Web页菜单(8)    
switch(effect)
使用Popup窗口创建无限级Web页菜单(8)    {
使用Popup窗口创建无限级Web页菜单(8)        
case 'GradientWipeLeft2Right' :
使用Popup窗口创建无限级Web页菜单(8)        {
使用Popup窗口创建无限级Web页菜单(8)            filterString 
+= "GradientWipe(duration='0.5',gradientSize='0.75',motion='forward')";
使用Popup窗口创建无限级Web页菜单(8)            
break;
使用Popup窗口创建无限级Web页菜单(8)        }
使用Popup窗口创建无限级Web页菜单(8)        
case 'GradientWipeUp2Down' :
使用Popup窗口创建无限级Web页菜单(8)        {
使用Popup窗口创建无限级Web页菜单(8)            filterString 
+= "GradientWipe(duration='0.5',gradientSize='0.25',motion='forward',wipeStyle='1')";
使用Popup窗口创建无限级Web页菜单(8)            
break;
使用Popup窗口创建无限级Web页菜单(8)        }
使用Popup窗口创建无限级Web页菜单(8)        
case 'RevealTrans' :
使用Popup窗口创建无限级Web页菜单(8)        {
使用Popup窗口创建无限级Web页菜单(8)            filterString 
+= "RevealTrans(duration='0.5',transition='12')";
使用Popup窗口创建无限级Web页菜单(8)            
break;
使用Popup窗口创建无限级Web页菜单(8)        }
使用Popup窗口创建无限级Web页菜单(8)        
case 'Fade' :
使用Popup窗口创建无限级Web页菜单(8)        {
使用Popup窗口创建无限级Web页菜单(8)            filterString 
+= 'Fade()';
使用Popup窗口创建无限级Web页菜单(8)            
break;
使用Popup窗口创建无限级Web页菜单(8)        }
使用Popup窗口创建无限级Web页菜单(8)        
default :
使用Popup窗口创建无限级Web页菜单(8)        {
使用Popup窗口创建无限级Web页菜单(8)            filterString 
= '';        // no effect
使用Popup窗口创建无限级Web页菜单(8)
            break;
使用Popup窗口创建无限级Web页菜单(8)        }
使用Popup窗口创建无限级Web页菜单(8)    }
使用Popup窗口创建无限级Web页菜单(8)    
if ( filterString )
使用Popup窗口创建无限级Web页菜单(8)    {
使用Popup窗口创建无限级Web页菜单(8)        menuHtml.style.visibility 
= 'hidden';
使用Popup窗口创建无限级Web页菜单(8)        menuHtml.style.filter 
= filterString;
使用Popup窗口创建无限级Web页菜单(8)        menuHtml.filters[
0].apply();
使用Popup窗口创建无限级Web页菜单(8)        menuHtml.style.visibility 
= 'visible';
使用Popup窗口创建无限级Web页菜单(8)        menuHtml.filters[
0].play(0.25);
使用Popup窗口创建无限级Web页菜单(8)    }
使用Popup窗口创建无限级Web页菜单(8)};

 #endregion

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

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

  #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属性也可以。 
    使用Popup窗口创建无限级Web页菜单(8)

    菜单中文字被截断的效果

    比如要显示如下效果:
 
MenuItem 1234567890 1234567890 1234567890
    HTML代码为:
使用Popup窗口创建无限级Web页菜单(8) <table style="table-layout: fixed;" width="200">
使用Popup窗口创建无限级Web页菜单(8)     
<tr>
使用Popup窗口创建无限级Web页菜单(8)         
<td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
使用Popup窗口创建无限级Web页菜单(8)                 border: solid 1px red;"
>MenuItem 1234567890 1234567890 1234567890
使用Popup窗口创建无限级Web页菜单(8)         
</td>
使用Popup窗口创建无限级Web页菜单(8)     
</tr>
使用Popup窗口创建无限级Web页菜单(8) 
</table>
    当我们的文字显示为"..."overflow样式后,我们还可以查询到这个状态,并给这样的条目添加tooltip。我们只用比较一下td元素的clientWidth和scrollWidth,如果不相等,也就是scrollWidth > clientWidth,就说明文本没有被显示全(当然出滚动条的时候这个比较也成立)。

    子菜单弹出时如果其右边的屏幕空间不够菜单的宽度,菜单将从父级菜单的左边弹出,使用下面的代码实现:
使用Popup窗口创建无限级Web页菜单(8) subpop.show(0011);
使用Popup窗口创建无限级Web页菜单(8) 
var menuHtml = subpop.document.getElementById('menu');
使用Popup窗口创建无限级Web页菜单(8) 
var x, y, w, h;
使用Popup窗口创建无限级Web页菜单(8) x 
= miHtml.offsetWidth-2;
使用Popup窗口创建无限级Web页菜单(8) y 
= 0;
使用Popup窗口创建无限级Web页菜单(8) w 
= menuHtml.offsetWidth;
使用Popup窗口创建无限级Web页菜单(8) w 
= this.__isEllipsis(subMenuObj, menuHtml);
使用Popup窗口创建无限级Web页菜单(8) h 
= menuHtml.offsetHeight;
使用Popup窗口创建无限级Web页菜单(8)
使用Popup窗口创建无限级Web页菜单(8) 
var availableScreenWidth = window.screen.width;
使用Popup窗口创建无限级Web页菜单(8) 
var factWidth = popup.document.parentWindow.screenLeft + menuObj.m_Bounds.width + w;
使用Popup窗口创建无限级Web页菜单(8) 
if ( factWidth > availableScreenWidth )
使用Popup窗口创建无限级Web页菜单(8) {
使用Popup窗口创建无限级Web页菜单(8)     x 
= - w + 2;
使用Popup窗口创建无限级Web页菜单(8) }    
使用Popup窗口创建无限级Web页菜单(8) subpop.show(x, y, w, h, miHtml);
使用Popup窗口创建无限级Web页菜单(8) subMenuObj.FadeinEffect(Menu.Attributes.ShowMenuEffect);
    前面说到到的FadeinEffect和__isEllipsis两个方法分别是在上面的位置被调用的。 

    如果对于popup制作无限级web页菜单还有疑问,或者有什么建议欢迎提出来讨论使用Popup窗口创建无限级Web页菜单(8)

    The End.

相关文章:

  • 2021-09-16
  • 2021-10-05
  • 2021-06-05
  • 2022-12-23
  • 2021-10-28
  • 2022-12-23
  • 2021-10-14
  • 2021-06-19
猜你喜欢
  • 2021-12-04
  • 2022-01-17
  • 2021-05-22
  • 2021-12-24
  • 2021-07-13
  • 2021-11-12
相关资源
相似解决方案