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

使用 JavaScript 和 DOM 创建自定义警报框

Helbrax
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.96/5 (14投票s)

2008 年 8 月 24 日

BSD

5分钟阅读

viewsIcon

211726

downloadIcon

4940

使用 JavaScript 和 DOM 创建自定义警告框。

引言

在用户界面设计方面，JavaScript 中的警告框是出了名的不灵活。您无法添加图像、更改背景颜色，或者以其他方式“主题化”对话框以匹配您的网页或 Web 应用程序的样式。幸运的是，JavaScript 结合文档对象模型 (DOM) 可以帮助我们实现原本无法实现的目标。

背景

这是我第二次尝试创建 JavaScript 警告框。我的第一次尝试是在几年前。代码很糟糕而且难以使用，所以我把它搁置了，打算彻底重写。我最近开始升级使用旧代码的 Web 应用程序，并决定是时候让旧代码重获生机了。

网络上有很多类似的警告框，但大多数都属于大型项目的一部分，或者使用了外部库。

Using the Code

要使用自定义警告/对话框，您必须将 JavaScript 源添加到您的头部，以及确定框将使用的“皮肤”的.css文件。

<link rel="Stylesheet" href="default.css" type="text/css" media="screen" />
<script type="text/javascript" src="DOMAlert.js"></script>

如果您未包含对样式表的引用，.js文件将在本地路径中查找default.css。

添加完.js和.css文件后，您可以使用以下构造函数创建一个新的警告框

var msg = new DOMAlert(
{
    title: 'Title',
    text: 'Alert Message',
    skin: 'default',
    width: 300,
    height: 300,
    ok: {value: true, text: 'Yes', onclick: showValue},
    cancel: {value: false, text: 'No', onclick: showValue }
});

构造函数仅接受一个参数，该参数是一个包含以下一个或多个属性的对象

  • title：警告框的标题。可以包含内联 HTML，但可能无法正确呈现。可选。可以在show()方法中传递。
  • text：警告框的文本。可以包含内联 HTML，但可能无法正确呈现。可选。可以在show()方法中传递。
  • skin：用于警告框的皮肤。本文后面将讨论皮肤/主题。
  • width：警告框的宽度。可选，但推荐。
  • height：警告框的高度。可选。
  • ok：一个对象，其中包含“OK”按钮的text、单击该按钮时调用的回调（onclick）以及传递给该回调的value。默认情况下，调用警告框的close()方法。可选，但推荐。
  • cancel：一个对象，其中包含“Cancel”按钮的文本、单击时调用的回调以及传递给该回调的值。没有默认值。

方法

当前支持以下方法

  • show()：将警告框的可见状态更改为visible。
  • show(text)：更改警告框的可见状态，并设置警告的text。如果使用此方法，则必须在构造函数中设置title。
  • show(title, text)：将警告框的可见状态更改为visible，并设置警告框的title和text。
  • hide()：将警告框的可见状态更改为hidden。
  • close()：销毁附加到警告框的所有 HTML 元素并注销所有onclick回调。这不会销毁对象本身及其方法，因为它们是原型化的。
  • center()：将警告框居中显示在页面上。大多数用户不应调用此方法，因为它会自动调用。

回调

“OK”和“Cancel”按钮的回调可以是现有函数的引用，也可以是闭包。对于预先存在的函数，将作为参数传递两个对象：对生成OnClick事件的警告框的引用，以及单击按钮的值。

function showValue(sender, value)
{
    //sender is the alert box that the event was called from
    //value is the value that was passed from the pressed button
}

皮肤/主题

.js文件几乎不包含关于警告框设计的任何信息，只包含布局。由于用户可能在每个警告框的设计上都有不同的要求，并且为了将设计与代码分开，设计信息位于.css文件中。如果未提供皮肤信息，代码将在当前目录中查找名为“default.css”的文件。每个 CSS 名称都需要以您要使用的皮肤名称作为前缀。因此，如果您的主题名为“human”，而您正在定义contentArea，那么您的 CSS 名称需要是.human_contentArea。

这允许您将所有皮肤信息包含在一个 .css 文件中，或者分散在多个文件中。这完全取决于您。但是，某些方面（如位置或宽度）可能会在.js文件中被覆盖。

可以使用以下样式名称

  • alertWindow：主警告窗口。
  • titleBar：标题栏。
  • titleBarLeftIcon：一个div，其样式设置为float: left。
  • titleBarRightIcon：一个div，其样式设置为float: right。
  • contentArea：文本将显示的内容区域。
  • buttonArea：包含按钮的区域。
  • okButton：您的“OK”按钮。
  • cancelButton：您的“Cancel”按钮。

Bug

IE6。我还需要多说吗？

  • IE6 不支持fixed属性。如果您希望警告框在用户滚动时保持在页面中心，您需要将您的center()方法添加到您的window.onscroll事件中。
  • Select元素将显示在其他元素之上，无论它们的 z-index 如何。此规则的例外是iframe。脚本将检查您是否正在使用 IE6，如果是，它将在警告框后面添加一个iframe以隐藏select元素。
  • 为了模拟模态和不透明度，使用了一个半透明的.png图像。但是，select元素仍然可以激活。您可能希望在适当的时候禁用select元素，然后再重新启用它们。

关注点

当使用“alpha(opacity=##)”时，“filter”属性在 Internet Explorer 中存在内存泄漏，即使在拥有它的 DOM 对象被删除后也是如此。因此，改用了半透明的.png。这在 IE6 中效果很好，IE6 对透明.png文件的支持不太好。相反，当脚本检测到浏览器是 IE6 时，我使用了专有的AlphaImageLoader。

历史

  • 2008 年 8 月 24 日，星期日 - 文章创建。
© . All rights reserved.