昨晚加班,无意找到一些类似msn,outlook等的信息提示的资料,今天把它整理了一下,然后自己测试通过,先分享出来,如果大伙在发送邮件或需要弹出信息对话框时,可以做个参考,也希望这段代码能越来越好,大家多提意见。
1.建立PopupManager.js,代码如下
// 队列
function Queue()
{
var items = new Array();
var first = 0;
var count = 0;
// 队列大小
this.Count = function()
{
return count;
} ;
// 取队列头/尾
this.Peek = function(last)
{
var result = null;
if (count > 0)
{
if (null != last && true == last)
result = items[first + (count - 1)];
else
result = items[first];
}
return result;
};
// 入列
this.Enqueue = function(x)
{
items[first + count] = x;
count++;
return x;
};
// 出列
this.Dequeue = function()
{
var result = null;
if (count > 0)
{
result = items[first];
delete items[first];
first++;
count--;
}
return result;
};
}
var newlineRegExp = new RegExp("(/r/n|/n|/r)", "g");
function NewlineReplace(str)
{
result = "";
if (str != null)
result = str.replace(newlineRegExp, "<br>");
return result;
}
var entityList = new Array();
entityList["<"] = "<";
entityList["/uff1c"] = "<";
entityList[">"] = ">";
entityList["/uff1e"] = ">";
entityList["&"] = "&";
entityList["/uff06"] = "&";
entityList["/""] = """;
entityList["/uff02"] = """;
function EntityReplace(str)
{
var result = "";
if (str != null)
{
var len = str.length;
var i = 0;
while (i < len)
{
var j = i;
var e = entityList[str.charAt(j)];
while (j < len && null == e)
{
j++;
e = entityList[str.charAt(j)];
}
result += str.substr(i, j - i);
if (e != null)
{
result += e;
j++;
}
i = j;
}
}
return result;
}
function GetPopupCssText()
{
var styles = document.styleSheets;
var csstext = "";
for(var i=0; i<styles.length; i++)
{
if (styles[i].id == "popupmanager")
csstext += styles[i].cssText;
}
return csstext;
}
function PopupWin(winID)
{
this.Win = document.getElementById(winID);
this.Menu = document.getElementById(winID + "_Menu");
this.Icon = document.getElementById(winID + "_Icon");
this.MenuButton = document.getElementById(winID + "_MenuButton");
this.CloseButton = document.getElementById(winID + "_CloseButton");
this.Caption = document.getElementById(winID + "_Caption");
this.CaptionText = document.getElementById(winID + "_CaptionText");
this.Body = document.getElementById(winID + "_Body");
this.BodyText = document.getElementById(winID + "_BodyText");
}
function Popup(winID, message, icon, title, func)
{
this.PostID;
this.URL;
this.Type = "Mail"; // Mail,Thread,Post,Message
this.win = new PopupWin(winID);
this.popup = null;
this.popupMenu = null;
this.PopupManager = null;
this.showTime = null;
this.func = func;
this.isMouseOver = false;
this.CreateBody = Popup_CreateBody;
this.Close = Popup_Close;
this.Hide = Popup_Hide;
this.Show = Popup_Show;
this.ShowTime = Popup_ShowTime;
this.aspxl = this.CreateBody(message, icon, title);
}
function Popup_Close()
{
if (this.popup != null)
this.popup.document.onmouseover = null;
else
this.win.Win.onmouseover = null;
this.isMouseOver = false;
this.ShowTime = function()
{
return 7;
}
this.Hide();
}
function Popup_Hide()
{
if (this.popup != null && this.popup.isOpen)
{
this.popup.hide();
}
this.popup = null;
}
function Popup_ShowTime()
{
var result = null;
if (this.showTime != null)
{
var now = new Date();
result = (now - this.showTime)/1000;
}
return result;
}
function OnClickClose_Popup()
{
var p = this.getAttribute("popup");
p.Close();
}
function OnClickMenu_Popup()
{
var p = this.getAttribute("popup");
if (p.popupMenu == null)
{
p.popupMenu = p.popup.document.parentWindow.createPopup();
var d = p.popupMenu.document;
var s = d.createStyleSheet();
s.cssText = GetPopupCssText();
var b = d.body;
b.rightmargin = 0;
b.leftmargin = 0;
b.topmargin = 0;
b.bottommargin = 0;
b.innerHTML = p.win.Menu.outerHTML;
b.style.cursor = "default";
b.oncontextmenu = OnContextMenu_Popup;
b.onmouseover = OnMouseOver_PopupMenu;
b.onmouseout = OnMouseOut_PopupMenu;
b.setAttribute("popup", p);
var menuDisable = d.getElementById(p.win.Win.id + "_Menu_Disable");
menuDisable.onclick = OnClickDisable_PopupMenu;
menuDisable.setAttribute("popup", p);
var menuSetting = d.getElementById(p.win.Win.id + "_Menu_Setting");
menuSetting.onclick = OnClickSetting_PopupMenu;
menuSetting.setAttribute("popup", p);
}
var toastWidth = p.win.Menu.offsetWidth;
var toastHeight = p.win.Menu.offsetHeight;
var toastVerticalMargin = 20;
var toastHorizontalMargin = 0;
p.popupMenu.show(toastHorizontalMargin, -toastVerticalMargin-toastHeight, toastWidth, toastHeight, p.win.MenuButton);
}
function OnClick_Popup()
{
var p = this.getAttribute("popup");
if (p != null && p.func != null)
{
p.func(p);
}
}
function OnClickDisable_PopupMenu()
{
var p = this.getAttribute("popup");
if (p != null)
{
p.PopupManager.Disabled = true;
p.Close();
}
}
function OnClickSetting_PopupMenu()
{
var url = this.getAttribute("URL");
var p = this.getAttribute("popup");
if (url != null)
{
window.open(url);
if (p != null)
{
p.Close();
}
}
}
function OnContextMenu_Popup()
{
var p = this.getAttribute("popup");
p.Close();
}
function OnMouseOver_Popup()
{
var p = this.getAttribute("popup");
p.isMouseOver = true;
}
function OnMouseOut_Popup()
{
var p = this.getAttribute("popup");
p.isMouseOver = false;
}
function OnMouseOver_PopupMenu()
{
var p = this.getAttribute("popup");
p.isMouseOver = true;
}
function OnMouseOut_PopupMenu()
{
var p = this.getAttribute("popup");
p.isMouseOver = false;
}
function Popup_Show()
{
this.showTime = new Date();
this.popup = window.createPopup();
var d = this.popup.document;
// d.createStyleSheet("CSS/style.css");
var s=d.createStyleSheet();
s.cssText = GetPopupCssText();
var b = d.body;
b.rightmargin = 0;
b.leftmargin = 0;
b.topmargin = 0;
b.bottommargin = 0;
b.innerHTML = this.aspxl;
b.style.cursor = "default";
b.oncontextmenu = OnContextMenu_Popup;
b.onmouseover = OnMouseOver_Popup;
b.onmouseout = OnMouseOut_Popup;
b.setAttribute("popup", this);
var closeButton = d.getElementById(this.win.Win.id + "_CloseButton");
closeButton.onclick = OnClickClose_Popup;
closeButton.setAttribute("popup", this);
var menuButton = d.getElementById(this.win.Win.id + "_MenuButton");
menuButton.onclick = OnClickMenu_Popup;
menuButton.setAttribute("popup", this);
var popupMessage = d.getElementById(this.win.Win.id + "_BodyText");
popupMessage.style.cursor = "hand";
popupMessage.onclick = OnClick_Popup;
popupMessage.setAttribute("popup", this);
var toastWidth = this.win.Win.offsetWidth;
var toastHeight = this.win.Win.offsetHeight;
var toastVerticalMargin = 28;
var toastHorizontalMargin = 16;
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
this.popup.show(screenWidth - toastWidth - toastHorizontalMargin, screenHeight - toastHeight - toastVerticalMargin,
toastWidth,toastHeight);
}
function Popup_CreateBody(msg, icon, title)
{
if (icon != null && icon != "")
this.win.Icon.src = icon;
this.win.BodyText.innerHTML = NewlineReplace(EntityReplace(msg));;
this.win.CaptionText.innerHTML = title;
var win = this.win.Win.cloneNode(true);
win.style.display = "";
return win.outerHTML;
}
function PopupManager()
{
var queue = new Queue();
this.Disabled = false;
var canShow = (window.createPopup != null);
this.Heartbeat = function()
{
if (queue.Count() > 0)
{
var p = queue.Peek();
var delta = p.ShowTime();
if (delta == null)
{
if (!this.Disabled)
p.Show();
}
else if ((p.popup == null) || (!p.popup.isOpen) || (!p.isMouseOver && delta >= 7))
{
p.Hide();
queue.Dequeue();
}
}
}
this.AddPopup = function(winid, message, icon, title, func)
{
var result = null;
do
{
if (canShow)
{
result = new Popup(winid, message, icon, title, func);
result.PopupManager = this;
queue.Enqueue(result);
this.Heartbeat();
}
}
while (false);
return result;
}
}
2.建立PopupManager.css,代码如下
.popup{
font-size:9pt;
width: 329px;
height: 74px;
border: 1px solid #0A246A;
filter: Alpha(opacity=80);
}
.popup td{
font-size:9pt;
}
.popupCaption{
background-image: url(images/popup_bg_caption.gif);
height: 7px;
}
.popupCaptionText{
overflow:hidden;
width: 260;
height: 100%;
padding-right: 4px;
padding-top: 4px;
text-decoration: underline;
color: blue;
}
.popupBody{
background-image: url(images/popup_bg_body.gif);
}
.popupBodyText{
overflow:hidden;
width: 100%;
height: 100%;
word-break: break-all;
word-wrap :break-word;
line-height: 1.1em;
padding-top: 1px;
text-decoration: underline;
color: blue;
}
.popupButton{
}
.popupButtonHover{
background-color: #0A246A;
}
.popupButtonHover TD{
background-color: #B6BDD2;
}
.popupMenu{
width: 177px;
border: 1px solid #666666;
background-color: #F9F8F7;
padding: 1px;
}
.popupMenuTable{
background-image: url(images/popup_bg_menu.gif);
background-repeat: repeat-y;
}
.popupMenuTable TD{
font-size: 9pt;
cursor: default;
}
.popupMenuRow{
height: 22px;
padding: 1px;
}
.popupMenuRowHover{
height: 22px;
border: 1px solid #0A246A;
background-color: #B6BDD2;
}
.popupMenuSep{
background-color: #A6A6A6;
height:1px;
width: expression(parentElement.offsetWidth-27);
position: relative;
left: 28;
}Top
2 楼singlepine(小山)回复于 2005-09-08 16:34:23 得分 0
3.建立PopupManager.aspx,前台
<%@ Page language="c#" Codebehind="PopupManager.aspx.cs" AutoEventWireup="false"
Inherits="Document.Pages.popup.PopupManager" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>PopupManager</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link rel='stylesheet' id="popupmanager" type='text/css' href='popupManager.css'>
<script src="PopupManager.js" type="text/javascript"></script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" runat="server" Text="测试"></asp:Button>
<table id="popupWin" class="popup" cellspacing="0" cellpadding="0" border="0" onselectstart="return false;"
οndragstart="return false;" >
<tr class="popupCaption" id="popupWin_Caption">
<td align="center"><img src="images/popup_caption.gif" border="0" alt=""></td>
</tr>
<tr class="popupBody" id="popupWin_Body">
<td valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tr>
<td align="center" valign="top" width="46" style="WIDTH: 46px;PADDING-TOP: 2px" nowrap>
<img src="images/popup_icon_mail.gif" border="0" alt="" id="popupWin_Icon">
</td>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tr height="18">
<td valign="bottom"><div id="popupWin_CaptionText" class="popupCaptionText">title1</div>
</td>
<td align="right" width="18">
<table cellspacing="1" cellpadding="0" border="0" width="18" height="18" class="popupButton"
οnmοuseοver="this.className='popupButtonHover';" οnmοuseοut="this.className='popupButton';"
οnmοusedοwn="var img=this.rows[0].cells[0].children[0];img.src=img.src.replace('_black','_white');"
οnmοuseup="var img=this.rows[0].cells[0].children[0];img.src=img.src.replace('_white','_black');"
id="popupWin_MenuButton">
<tr>
<td align="center"><img src="images/popup_icon_arrow_black.gif" border="0" alt=""></td>
</tr>
</table>
</td>
<td align="right" width="18">
<table cellspacing="1" cellpadding="0" border="0" width="18" height="18" class="popupButton"
οnmοuseοver="this.className='popupButtonHover';" οnmοuseοut="this.className='popupButton';"
id="popupWin_CloseButton">
<tr>
<td align="center"><img src="images/popup_icon_close.gif" border="0" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div id="popupWin_BodyText" class="popupBodyText">
</div>
</td>
</tr>
<tr height="8">
<td>
<td />
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="popupMenu" id="popupWin_Menu">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" class="popupMenuTable">
<tr height="22">
<td class="popupMenuRow" οnmοuseοver="this.className='popupMenuRowHover';" οnmοuseοut="this.className='popupMenuRow';"
id="popupWin_Menu_Disable">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tr>
<td width="28"> </td>
<td><span>Disable Popup</span></td>
</tr>
</table>
</td>
</tr>
<tr height="3">
<td>
<div class="popupMenuSep"><img height="1"></div>
</td>
</tr>
<tr height="22">
<td class="popupMenuRow" οnmοuseοver="this.className='popupMenuRowHover';" οnmοuseοut="this.className='popupMenuRow';"
id="popupWin_Menu_Setting" URL="PopupDetail.aspx?ReturnUrl=PopupManager.aspx">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tr>
<td width="28"> </td>
<td><span>Popup Setting</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
<script>
var popupManager = new PopupManager();
window.setInterval("popupManager.Heartbeat();", 1500); // 更新
var p = popupManager.AddPopup("popupWin", '<%=Contect%>', "", '<%=Subject%>', func);
function func(popup)
{
//alert("PostID:" + popup.PostID)
window.open("PopupDetail.aspx?id="+'<%=ID%>');
}
</script>
</body>
</HTML>Top
3 楼singlepine(小山)回复于 2005-09-08 16:34:45 得分 0
4.建立PopupManager.aspx,后台
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace Document.Pages.popup
{
/// <summary>
/// Summary description for PopupManager.
/// </summary>
public class PopupManager : System.Web.UI.Page
{
protected string Contect;
protected string Subject;
protected string ID;
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
protected System.Web.UI.WebControls.Button Button1;
/// <summary>
/// 通过这个函数,设定超越IE窗口的Popup窗口的诸多属性
/// </summary>
/// <param name="sender">
/// 发送体
/// </param>
/// <param name="sTitle">Popup信息的完整信息</param>
/// <param name="sInfo">Popup信息的简短提示</param>
///
private void Popup(string sTitle,string sInfo)
{
//编辑须执行的脚本语言
string javaScript = @"<script language = javascript>try{var popupManager = new PopupManager();" +
"var p = popupManager.AddPopup('popupWin', '" + sTitle +
"', 'images/popup_icon_Post.gif', '" + sInfo + "', ShowPost);p.PostID = '1';p.URL = nodeURL.text;}catch(e){}" +
"function ShowPost(popup){}</script>";
//执行
this.Page.RegisterStartupScript("meng",javaScript);
}
private void Button1_Click(object sender, System.EventArgs e)
{
// 这是一个只有IE5.5才支持的特性,超越IE自身窗体的弹出窗口
Contect="敬请察看结果:彩铃数据分析系统";
Subject="歌手查询完毕";
ID="1";//这里的id就是弹出信息的id,可以从数据库取出
Popup(Subject,Contect);
}
}
}
5.建立detail页面PopupDetail.aspx
6.建立images文件夹,图片放到这下面,图片和outlook邮件图片相似