最后总结一下示例中的一些小问题，没有什么太重要的东西，主要都是为了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属性也可以。
比如要显示如下效果：
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两个方法分别是在上面的位置被调用的。
显示特效的支持，使用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
 |
菜单中文字被截断的效果 |
|
|
<
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
>
子菜单弹出时如果其右边的屏幕空间不够菜单的宽度，菜单将从父级菜单的左边弹出，使用下面的代码实现：
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);
如果对于popup制作无限级web页菜单还有疑问，或者有什么建议欢迎提出来讨论
。
本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。
