<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的源代码,你可以复制到自己的网页应用中,不用作任何修改它就会工作得很好。如果你将它改进得更好,也请慷慨地与我([email protected])分享。谢谢!

//
// 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; } };