导航
  • 主页
  • ASP
  • .NET Framework
  • Web Services
  • VB
  • VC
  • 图表区
  • 分析与设计
  • 组件/控件开发
  • LINQ
  • 问答

【分享】Web的桌面提醒(Popup,类似msn,outlook等的信息提示)

singlepine 2005-09-09 11:56:01
昨晚加班,无意找到一些类似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();
}
...全文
195 点赞 收藏 5
写回复
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
Apq001 2006-06-07
Mark
回复
singlepine 2005-09-21
http://community.csdn.net/Expert/topic/4257/4257831.xml?temp=8.359927E-02
回复
singlepine 2005-09-09
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邮件图片相似
回复
singlepine 2005-09-09
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; "
ondragstart= "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 "
onmouseover= "this.className='popupButtonHover'; " onmouseout= "this.className='popupButton'; "
onmousedown= "var img=this.rows[0].cells[0].children[0];img.src=img.src.replace('_black','_white'); "
onmouseup= "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 "
onmouseover= "this.className='popupButtonHover'; " onmouseout= "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 " onmouseover= "this.className='popupMenuRowHover'; " onmouseout= "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 " onmouseover= "this.className='popupMenuRowHover'; " onmouseout= "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 >
回复
singlepine 2005-09-09
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;
}
回复
发动态
发帖子
.NET技术社区
创建于2007-09-28

5.8w+

社区成员

.NET技术交流专区
申请成为版主
社区公告
暂无公告