使用Popup窗口创建无限级Web页菜单(8)-阿里云开发者社区

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

2017-12-18 909

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

最后总结一下示例中的一些小问题，没有什么太重要的东西，主要都是为了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 )

{

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太长时使用...截断显示，代码如下：

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

{