65.9K
CodeProject 正在变化。 阅读更多。
Home

JavaScript 中的 Internet Explorer 风格信息栏

Helbrax
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.45/5 (9投票s)

2008年6月9日

BSD

4分钟阅读

viewsIcon

47124

downloadIcon

287

JavaScript 中的 Internet Explorer 风格信息栏

引言

Internet Explorer 有一个有趣的、尽管有时被认为是不受欢迎的通知方法，用于处理不安全的代码执行、下载等。值得称赞的是，这是一种简单且在一定程度上不引人注目的方式来提醒用户网站或账户的更改。此脚本尝试使用 JavaScript 和 DOM 来模拟此行为，以便在其他浏览器中也能实现此效果。

Using the Code

代码非常简单。只需将以下内容添加到 HTML 页面的 head 中

<script type="text/javascript" src="infoBar.js"></script>
<script type="text/javascript">
window.onload = function()
{
    var bar = new infoBar({text: 'This is a test'});
    bar.show(50);
};

new infoBar 将创建一个新的 infoBar 对象。您可以在创建时传递多个参数，但唯一必需的选项是 text，它是在您的提示框中显示的文本。

选项

您可以通过以下方式在构造函数中传递多个选项

new infoBar({option: value, option2: value2})

当前支持以下选项

  • text：要显示的文本。可以包含 HTML，但添加复杂的样式可能会导致信息栏显示异常，因此建议谨慎使用。必需。
  • backColor：背景颜色。任何十六进制或命名的 HTML/CSS 颜色值。
  • fontColor：字体颜色。任何十六进制或命名的 HTML/CSS 颜色值。
  • icon: 要使用的图标。默认图标是“information”。文件包含三个图标供您使用：information.png、exclamation.png 和 help.png。您可以提供自己的图标。只需将它们命名为 whatever.png 并以不带扩展名的文件名引用它们。
// you should have a PNG file named myspecialicon.png
new infoBar({icon: 'myspecialicon'})

方法

  • show(milliseconds)：显示 infoBar 对象。如果提供了 milliseconds，则信息栏将根据 milliseconds 值“渐入”。100 是一个不错的过渡值。
  • setText(text)：设置 infobar 的文本。
  • setIcon(icon)：设置图标。
  • setFontColor(color)：设置字体颜色。
  • setBackColor(color)：设置背景颜色。
  • hide()：隐藏 infobar。可以使用 show 方法再次显示。
  • destroy()：从屏幕上移除 infoBar。对象本身不会被销毁，但 div 会从 DOM 中移除。

技术

这种技术相对简单。DOM（文档对象模型）和 JavaScript 提供了一种简便的方法来添加/删除/修改现有页面上的内容。

我们首先为我们的 infoBar 创建一个 div。它将包含我们的文本和图标。

var infoBarDiv = document.createElement('div');

接下来，我们必须开始为我们新创建的 div 添加属性。我们设置背景颜色、内边距、字体颜色、不透明度、字体大小等。这是通过以下方式完成的：

infoBarDiv.somepropertyname = somevalue;
//for example: set the font size to 8pt:  infoBarDiv.style.fontSize = '8pt';

接下来，我们以与创建 div 相同的方式创建图像

var icon = document.createElement('img');
var close  = document.createElement('img');

我们还必须为这些图像设置属性，例如图像源和位置。对于 Close 图像，我们还添加了一个 onclick 事件，以便在单击“关闭”按钮时隐藏 infoBar。

close.onclick = function()
{
    infoBarDiv.style.display = 'none';
};

我们还需要一个 div 来包含我们的文本。我们使用与上面描述的 infoDiv 相同的方法。

现在所有对象都已创建，我们必须将它们实际添加到文档中。我们首先将图像添加到 infoBar div。然后，我们将 infoBar div 添加到我们的文档主体中。

infoBarDiv.appendChild(close);
infoBarDiv.appendChild(icon);
infoBarDiv.appendChild(text);
document.body.insertBefore(infoBarDiv, document.body.firstChild);

我也可以使用 document.body.appendChild(infoBarDiv) 将信息栏添加到文档中。但是，我希望信息栏成为文档树中的第一个元素，因此我确保在主体中的任何子元素之前添加它。

要将所有方法添加到我们的对象，我们使用 prototype 对象。我们可以直接在构造函数中添加它们，但我们的构造函数已经足够满了，而且我们确实应该保持它尽可能整洁。

infoBar.prototype.somemethodname = function()
{
    //do stuff
}

就这样！只需添加一些 div 和图像，并利用 DOM，我们就可以在向用户呈现信息的方式上获得极大的灵活性。

关注点

Internet Explorer 6 无法正确支持 `fixed` CSS 属性。当使用时，它将默认为 `static` 的定位。这是不可接受的。不仅 infoBar 不会随着用户滚动而滚动，而且它还会出现在页面的边距/内边距内，除非用户将其页面的边距和内边距设置为 0px，否则会产生难看的空白。

为了解决这个问题，我们检查是否正在运行 Internet Explorer 6

var ie6 = (document.all && window.external && (
   typeof document.documentElement.style.maxHeight == 'undefined')) ? true : false;

如果 ie6 变量为 true，那么我们需要将定位设置为 absolute，并设置 window.onscroll 事件，以使我们的 infoBar 的 left 和 top 位置随着页面的滚动而调整。另外，万一我们认为我们处于 Internet Explorer 6 但实际上不是，还提供了一些可选的滚动属性。

window.onscroll = function()
{
  infoBarDiv.style.top = parseInt(window.pageYOffset || 
        (document.documentElement.scrollTop || 0)) + 'px';
  infoBarDiv.style.left = parseInt(window.pageXOffset || 
        (document.documentElement.scrollLeft || 0)) + 'px';
}

幸运的是，Internet Explorer 7 修复了此 bug，因此我们可以正确使用 fixed 值。

此项目使用的图标可以在 这里 找到。

历史

  • 2008 年 6 月 10 日，星期二 -- 次要 bug 修复和文章清理
  • 2008 年 6 月 9 日，星期一 -- 文章提交
© . All rights reserved.