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

Gmail 内部聊天风格的消息框

Niral Soni
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.90/5 (8投票s)

2009年9月14日

CPOL

3分钟阅读

viewsIcon

50637

downloadIcon

1311

Gmail 内部聊天风格的消息框

引言

本文为您提供一个多功能的消息框窗口，通过它，您可以提高网站或任何 Web 应用程序的可用性。

背景

你们可能都熟悉使用 Gtalk / Gmail 聊天应用程序。 每当有人向您发送消息时，浏览器右下角（Gmail / Orkut）或桌面右下角会出现一个小窗口。 消息窗口无缝运行，无需任何用户交互，但仍然与用户交互。

我试图实现的是在 Web 浏览器中实现一个类似的多功能消息框窗口，从而避免所有不必要的点击，并在任何时间间隔向用户提供所有有用的信息。

MessageBox - Click to enlarge image

特点

  • 支持 AJAX 的可配置消息框窗口
  • 可以设置可见的消息框的最大数量
  • 可以定义自动重新加载时间，对于单个消息、所有消息或不重新加载
  • 可以通过单个函数调用创建消息
  • 可以定义每条消息的自动隐藏时间

通过此功能，您可以避免所有警报消息 / 弹出消息，但仍然通知用户系统中正在发生的事情。

Using the Code

首先，您应该执行以下步骤

  1. 在您的 HTML 页面 HEAD 部分中包含以下 CSS 和 JS 文件
    <link href="base.css" type="text/css" rel="stylesheet" />
<link href="theme.css" type="text/css" rel="stylesheet" />
<script src="MessageBox.js" type="text/javascript"></script>
  2. 在 BODY 部分中，创建一个容器来容纳 messagebox 窗口，并为其提供一个唯一的 ID，如下所示
    <DIV ID="MsgContainer" CLASS="MsgContainer"></DIV>
  3. 最后，您需要为消息框窗口创建一个对象。
    • thisObject: 您正在创建的对象的名称
    • msgContainer: 包含消息框窗口的容器的 ID
    • maxMessages: 一次可以显示的消息的最大数量
    • autoHideTime: 所有出现的消息框窗口的全局自动隐藏时间
    <SCRIPT LANGUAGE="JavaScript">
//MessageBox(thisObject, msgContainer, maxMessages, autoHideTime /*milli seconds*/)
var messagebox = new MessageBox('messagebox', 'MsgContainer', 2, 10000);
</SCRIPT>

如何创建消息框窗口？

MessageBox 类为您提供了两个用于创建消息框窗口的 API。可以使用在步骤 3 中创建的 MessageBox 对象访问这些 API。

  1. messagebox.activateMsgBox
	(msgHeader, url, minutesBeforeReload, autoHideTime, msgType)

    如果要使用 AJAX 请求显示消息框，请调用此方法。 不需要单独的 AJAX 代码。只需提供一个要从中提取数据的 URL。

    参数含义

    • msgHeader: 要显示的标题内容
    • url: 要从中显示数据的 URL
    • minutesBeforeReload: 重新加载时间（以分钟为单位）
    • autoHideTime: 自动隐藏时间（以毫秒为单位）
    • msgType: 要显示的消息框的类型

    msgType 分为 4 类，这只是消息窗口背景颜色的变化。 目前，我已将它们设置为

    {DEFAULT: -1, INFO: '#FFFF80', ALERT: '#FF7E00', ERROR: '#FF0000'};

    可以使用 MessageBox 对象访问它，如下所示

    messagebox.msgTypes.DEFAULT
messagebox.msgTypes.INFO
messagebox.msgTypes.ALERT
messagebox.msgTypes.ERROR
  2. messagebox.createMsgBox(msgHeader, msgContent, msgIndex, autoHideTime, msgType)

    如果要静态显示消息框窗口，请调用此方法。例如，您希望通过消息框窗口通知用户“表单已成功保存”。

    参数含义

    • msgHeader: 要显示的标题内容
    • msgContent: 消息框的内容（文本或 HTML）
    • msgIndex: 将其设置为 null
    • autoHideTime: 自动隐藏时间（以毫秒为单位），如果设置为 null，则将应用默认设置
    • msgType: 要显示的消息框的类型，如上所示

结论

希望大家都觉得这篇文章很有用。

历史

  • 2009 年 9 月 14 日：初始发布
© . All rights reserved.