popupwindow.js

事件提醒系统

/********************************************************************
 ** 实现一个类似 MSN 的消息提示窗口。
 ** 说明：同时弹出两个窗口时会有闪烁，可以用层代替，不过层不能跨框架。
 *******************************************************************/

var WIN_MESSAGE = 0;
var WIN_SYS_MENU = 1;
var WIN_BTN_MENU = 2

//var header._popup = null;
//var header._timer = 0;
var header = top.frames["header"];

function openPopup(wtype) {
    if (header._popup != null) {
        closePopup();
    }
    header._wtype = wtype;
    header._popup = window.createPopup(); //IE5.5+
}

function closePopup() {
    if (header._timer > 0) {
        window.clearInterval(header._timer);
        header._timer = 0;
    }
    header._wtype = -1;
    if (header._popup == null || !header._popup.isOpen) return;
    header._popup.hide();
    //header._popup = null;
}

/**
 * 构造函数。
 * wtype: 0 - message window, 1 - system menu window, 2 - button menu window
 */
function PopupWindow(wtype, caption, content, left, top, width, height)
{
    this.wtype   = wtype;

    this.caption = caption;
    this.content = content;
    this.menus   = null;

    if (wtype == WIN_MESSAGE)
    {
        this.width   = width ? width : 250;
        this.height  = height ? height : 150;
        this.right   = screen.availWidth - 5;
        this.bottom  = screen.availHeight - 31;
        this.left    = left ? left : (this.right - this.width);
        this.top     = top ? top : (this.bottom - this.height);
    }
    else if (wtype == WIN_SYS_MENU)
    {
        this.left    = left ? left : 10;
        this.width   = width ? width : 200;
        this.height  = height ? height : 20;
        this.right   = this.left + this.width;
        this.bottom  = screen.availHeight - 30;
        this.top     = top ? top : (this.bottom - this.height);
    }

    this.imageRoot = "";
    this.timeout = 500; //停留时间
    this.speed   = 10;  //速度
    this.step    = 5;   //步长
    
    this.paused  = false;
    this.closing = false;
    this.offset  = 0;

    openPopup(wtype);
}

/**
 * 消息命令事件（点击消息时触发）。可重写它以实现自己的操作。
 */
PopupWindow.prototype.onCommand = function()
{
};

/**
 * 消息命令事件（点击消息时触发）。可重写它以实现自己的操作。
 */
PopupWindow.prototype.onClickMenuItem = function(name, icon)
{
};

/**
 * 设置菜单数组。
 */
PopupWindow.prototype.setMenuItems = function(menus)
{
    this.menus = menus;
};

/**
 * 设置图片根目录
 */
PopupWindow.prototype.setImageRoot = function(imgRoot)
{
    this.imageRoot = imgRoot;
};

/**
 * 显示消息窗口。
 */
PopupWindow.prototype.showMessage = function()
{
    if (this.wtype != WIN_MESSAGE) {
        return;
    }

    /*
    var str = "<div style='border-left:#718da6 1px solid;border-top:#718da6 1px solid;border-right:#455690 1px solid; border-bottom:#455690 1px solid;position:absolute; z-index:99999;top:0px;left:0px;width:" + this.width + "px;height:" + this.height + "px;background:#f2f8ff;'>";
    str += "<table style='width:100%; height:100%;font-size:12px;border-top:#ffffff 1px solid; border-left:#ffffff 1px solid;' cellspacing='0' cellpadding='0' border='0'>";
    str += "<tr style='height:22px;background:#cce0f5;'>";
    str += "<td style='padding-left:4px;font-weight:bold;color:#1f336b;'>" + this.caption + "</td>";
    str += "<td style='padding-right:6px;text-align:right;'>";
    str += "<span style='font-weight:bold;cursor:hand; color:#ff0000;' id='btnSysClose'>&#215</span>";
    str += "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td style='padding:9px;word-break:break-all;text-align:center;border-top:#718da6 1px solid;' colspan='2'>";
    str += "<div id='btnCommand' style='cursor:hand;' onmouseover='this.style.textDecoration=\"underline\"' onmouseout='this.style.textDecoration=\"none\"'>" + this.content + "</div>";
    str += "</td>";
    str += "</tr>";
    str += "</table>";
    str += "</div>";
    */

    var str = "<div style='border:#4AAAD6 1px solid;position:absolute; z-index:99999;top:0px;left:0px;width:" + this.width + "px;height:" + this.height + "px;'>";
    str += "<table style='width:100%; height:100%;font-size:12px;' cellspacing='0' cellpadding='0' border='0'>";
    str += "<tr style='height:24px;background:url(" + this.imageRoot + "Msg/msg_bgh.gif);'>";
    str += "<td style='padding-left:4px;font-weight:bold;color:#0030AD;'><img src='" + this.imageRoot + "Msg/msg_alarm.gif' align=absmiddle border=0>&nbsp;" + this.caption + "</td>";
    str += "<td style='padding-right:6px;text-align:right;'>";
    str += "<span style='font-weight:bold;cursor:hand; color:#ff0000;' id='btnSysClose'><img src='" + this.imageRoot + "Msg/msg_x2.gif' border=0></span>";
    str += "</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td style='padding:0 5px 5px 5px;word-break:break-all;text-align:center;' colspan='2'>";
    str += "<div style='width:100%;height:100%;padding:9px;border:#7B9EBD 1px solid;background:#EFF7FF;'>";
    str += "<div id='btnCommand' style='cursor:hand;' onmouseover='this.style.textDecoration=\"underline\"' onmouseout='this.style.textDecoration=\"none\"'>" + this.content + "</div>";
    str += "</div>";
    str += "</td>";
    str += "</tr>";
    str += "</table>";
    str += "</div>";

    header._popup.document.body.innerHTML = str;
    str = null;

    this.offset = 0;
    var me = this;

    header._popup.document.body.onmouseover = function(){me.paused = true;};
    header._popup.document.body.onmouseout = function(){me.paused = false;};

    var btnClose = header._popup.document.getElementById("btnSysClose");
    btnClose.onclick = function()
    {
        me.close();
    };
    
    var btnCommand = header._popup.document.getElementById("btnCommand");
    btnCommand.onclick = function()
    {
        me.onCommand();
        me.close();
    };
    
    //header._popup.show(me.left, me.top, me.width, me.height);

    var fun = function()
    {
        var x = me.left;
        var y = 0;
        var width = me.width;
        var height = 0;

        if (me.offset > me.height)
        {
            height = me.height;
        }
        else
        {
            height = me.offset;
        }

        y = me.bottom - me.offset;

        if (y <= me.top)
        {
            me.timeout --;

            if (me.timeout == 0)
            {
                me.hide();
            }
        }