无干扰模式的信息提示

    <script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfMessage.js"></script>

两种信息提示方式的对比：

---

在Web开发中，交互性地向用户作出一些提示，是一个不可缺少的开发需求。

最早的信息提示是使用警告对话框，如：

alert('信息提示。');

点击这里运行

这样的方式实现起来很简单，但有时会显得非常讨厌，因为你不得不对它进行回应。所以这种方式渐渐被抛弃，除非是向你询问“是否真的要删除它？”之类的信息时才会继续用它。

作为用户，在浏览网页希望得到一些提示，但除非是重要的提示，否则请不要让提示打扰到我。如果将信息放在一个安静的角落显示出来，停留一会儿后自行消失，那将是一个不错的解决方案。

如果你使用过Google文档或者Gmail，就会明白我说的无干扰信息模式的信息提示是什么意思。

本文后面所附的javascript代码正实现了以上需求，它的用法很简单，如下：

<script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfMessage.js"></script>
var oInfo = new mfMessage();
oInfo.showMessage('无干扰的信息提示。', true);

点击这里运行

以上代码中，var oInfo = new mfMessage(); 创建了一个信息显示对象，通过调用showMessage()方法即可在网页顶部显示指定的信息内容，而参数true，说明信息提示2秒钟后将自动消失。如果省略它，或者指定为false，那么，信息显示出来后，不会自行消失，而需要用户点击一下它才会消失（如果是重要的信息可以使用指定false，即使用户不点击信息，也不会对他/她造成干扰，因为它只占了一小块地方，而且是非模态的）。

如果你希望信息提示显示5秒钟（即5000毫秒）后再消失，可以指定显示时间为5秒，方法为：

<script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfMessage.js"></script>
var oInfo = new mfMessage();
oInfo.showMessage('无干扰的信息提示。', true, 5000);

点击这里运行

以下是mfMessage.js的源代码，你可以复制到自己的网页应用中，不用作任何修改它就会工作得很好。如果你将它改进得更好，也请慷慨地与我（admin@myfootprints.cn）分享。谢谢！

//
// mfMessage 对象
//
function mfMessage(sMessageWindowId) {
    this.message = '';
    if (sMessageWindowId) {
        this.messageWindowId = sMessageWindowId;
    } else {
        this.messageWindowId = 'mfMessageWindow';
    }
    this._init_ = false;
    // 通知window对象，在HTML文档加载完成后告诉我（mfMessage对象）一声
    this.addEventHandler(window, 'load', function() {
        window.isReady = true;
    });
}
mfMessage.prototype.init = function() {
if (this.init) { return; }
// 只有在HTML文档加载完成后，本信息显示器才可以正常工作
if(!window.isReady) {return;}
var sMessageWindowId = this.messageWindowId;
function hideMessage() {
var oWin = document.getElementById(sMessageWindowId);
oWin.style.display = 'none';
}
var oDocFragment = document.createDocumentFragment();
var oWin = document.createElement('div');
oWin.setAttribute('id', this.messageWindowId);
oWin.style.display = 'none';
// 其他CSS属性
oWin.style.position = 'absolute';
oWin.style.left = '0';
oWin.style.top = '0';
oWin.style.width = '100%';
oWin.style.zIndex = '1001';
oWin.style.textAlign = 'center';

oDocFragment.appendChild(oWin);
// 将文档碎片加入到页面的body中
var oBody = document.getElementsByTagName('body')[0];
oBody.insertBefore(oDocFragment, oBody.firstChild);
this.addEventHandler(oWin, 'click', hideMessage);
this._init_ = true;

};
mfMessage.prototype.showMessage = function(vMsg, bNonIntrusive, lDelay) {
if (!this.init) {
this.init();
}
var sMessageWindowId = this.messageWindowId;
function hideMessage() {
var oWin = document.getElementById(sMessageWindowId);
oWin.style.display = 'none';
}
var oWin = document.getElementById(this.messageWindowId);
try {
oWin.removeChild(oWin.firstChild);
} catch (oError) {
}
var oMessage;
if (vMsg.constructor == window.Array && vMsg.length > 1) {
oMessage = document.createElement('ul');
for (var i = 0; i < vMsg.length; i++) {
var oMessageLI = document.createElement('li');
var oMessageText = document.createTextNode(vMsg[i]);
oMessage.appendChild(oMessageLI);
oMessageLI.appendChild(oMessageText);
}
} else {
oMessage = document.createTextNode(vMsg);
}
var oMessageWrapper = document.createElement('div');
// 设置 oMessageWrapper 的CSS属性
oMessageWrapper.style.padding = '5px';
oMessageWrapper.style.color = 'black';
oMessageWrapper.style.fontWeight = 'bold';
oMessageWrapper.style.backgroundColor = '#FFF1A8';
oMessageWrapper.style.cursor = 'pointer';
oMessageWrapper.style.display = 'inline-block';
oMessageWrapper.style.width = 'auto';
oMessageWrapper.style.height = 'auto';
oMessageWrapper.style.textAlign = 'left';
oMessageWrapper.style.fontSize = '16px';
oMessageWrapper.appendChild(oMessage);
oWin.appendChild(oMessageWrapper);
oWin.style.display = 'block';
if (bNonIntrusive) {
    // 无干扰模式，启动计时器
    var lD;
    if (lDelay) {
        lD = lDelay;
    } else {
        lD = 2000;
    }
    window.setTimeout(hideMessage, lD);
}

};
// 添加事件监听
mfMessage.prototype.addEventHandler = function(oTarget, sEventType, fnHandler, vArgument /* optional */) {
//# 生成handler函数
var handler;
if (typeof (vArgument) == 'undefined') {
handler = fnHandler;
} else {
handler = function() {
fnHandler(vArgument);
};
}
if (oTarget.addEventListener) {         // for DOM-compliant browsers
oTarget.addEventListener(sEventType, handler, false);
} else if (oTarget.attachEvent) {       // for IE
oTarget.attachEvent("on" + sEventType, handler);
} else {                                // for all others
oTarget["on" + sEventType] = handler;
}
};