JavaScript 中的有限状态机,第 3 部分: 测试小部件
2010-09-14 13:20:44 来源:WEB开发网当淡化工具提示的淡化效果不起作用时
不幸的是,在用前一节中的设计修改消除关于意外事件的所有警告之后,对 Internet Explorer 的进一步测试发现了另一个无关的问题。用 FadingTooltip 部件定义的工具提示会直接弹入和弹出视图,而不是淡入和淡出。不幸的是,Internet Explorer 不支持提议的标准 CSS opacity 样式(参见 参考资料)。
Internet Explorer 支持非标准的样式 filter,这个属性具有相似的功能(参见 参考资料)。为了应用这个属性,需要在 createTooltip 方法中插入清单 7 中粗体的代码行。
清单 7. 在 Internet Explorer 中创建工具提示的额外 JavaScript 代码
FadingTooltip.prototype = {
...
createTooltip: function() {
this.tooltipDivision = document.createElement('div');
...
this.currentOpacity = this.tooltipDivision.style.opacity = 0;
if (this.tooltipDivision.filters) { // for MSIE only
this.tooltipDivision.style.filter = 'alpha(opacity=0)';
}
...
},
...
还需要在 fadeTooltip 方法中插入对应的代码,如清单 8 所示。
清单 8. 在 Internet Explorer 中使工具提示产生淡化效果的额外 JavaScript 代码
FadingTooltip.prototype = {
...
fadeTooltip: function(opacityDelta) {
...
this.tooltipDivision.style.opacity = this.currentOpacity;
if (this.tooltipDivision.filters) { // for MSIE only
this.tooltipDivision.filters.item('alpha').opacity =
100*this.currentOpacity;
}
},
...
Tags:JavaScript 有限 状态
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接